MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.25.0 is available! For more information about this release, check out this topic.

    SOLVED Go East, young icon!

    Troubleshooting
    5
    22
    9239
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Mykle1
      Mykle1 Project Sponsor Module Developer last edited by

      Hi all,

      I don’t even know if it’s possible, and it really isn’t necessary, but I’m trying to move the “mobile” icon in MMM-NetworkScanner from its place on the left of the device name to the right of the device name. I spent a good amount of time trying to achieve this, and I was trying where I probably shouldn’t ( the MMM-NetworkScanner.js file), and still no success.

      This is where the mobile icon appears by default, to the left of the devices name. 0_1487111032913_IMG_1741edit.jpg

      I’d rather it be here, on the right of the device name, where the smiley face is.0_1487111179700_IMG_1743edit2.jpg

      If this is the developers jurisdiction then I humbly acquiesce.

      Peace ☮

      Create a working config
      How to add modules

      1 Reply Last reply Reply Quote 0
      • tosti007
        tosti007 Module Developer last edited by tosti007

        The reason why it’s a bad practice to change the maker’s code is because you cannot do an easy git pull anymore due to the changes. That means that every time there is a new version of the module you will have to redownload it and then modify the code again.

        That being said there is no way to get what you want without modifying the code, unless the maker adds this as a feature in the future.

        To get what you want you only have to change code inside MMM-NetworkScanner.js.
        Inside the getDom function you can find the lines:

        // Icon
        icon =  document.createElement("i");
        icon.classList.add("fa-li", "fa", "fa-" + device.icon);
        deviceItem.appendChild(icon);
        
        // Name 
        deviceItem.innerHTML += device.name;
        

        All you have to do is change that part into:

        // Name 
        deviceItem.innerHTML += device.name;
        
        // Icon
        icon =  document.createElement("i");
        icon.classList.add("fa-li", "fa", "fa-" + device.icon);
        deviceItem.appendChild(icon);
        

        So this is basically swapping the order in which the icon and the text are added to deviceItem.

        Hope this helps 😃

        Note: I am currently on mobile so have no way of testing it. If it doesn’t work then let me know and i will search another solution (and I will be confused since I am pretty sure this works)

        If there is anything don't hesitate to contact me!
        ProfileSwitcher, TouchNotifications

        Mykle1 2 Replies Last reply Reply Quote 0
        • Mykle1
          Mykle1 Project Sponsor Module Developer @tosti007 last edited by

          @tosti007 said in Go East, young icon!:

          Note: I am currently on mobile so have no way of testing it. If it doesn’t work then let me know and i will search another solution (and I will be confused since I am pretty sure this works)

          It’s 7am here. I’m running off to work but I will try as soon as I get home. I will let you know. Many thanks.

          Create a working config
          How to add modules

          strawberry 3.141 1 Reply Last reply Reply Quote 0
          • strawberry 3.141
            strawberry 3.141 Project Sponsor Module Developer @Mykle1 last edited by

            @Mykle1 you can achieve this without modifying the code

            custom.css

            .MMM-NetworkScanner .fa-ul li .fa-li {
              float: right;
            }
            

            if this ends up with a to big gap you can limit the wifht of the list with

            .MMM-NetworkScanner .fa-ul {
              width: 200px;
            }
            

            Please create a github issue if you need help, so I can keep track

            Mykle1 2 Replies Last reply Reply Quote 3
            • Mykle1
              Mykle1 Project Sponsor Module Developer @strawberry 3.141 last edited by

              @strawberry-3.141 said in Go East, young icon!:

              custom.css
              .MMM-NetworkScanner .fa-ul li .fa-li {
              float: right;
              }

              This did not work for me. The mobile icon remained on the left side of the device name. I should note that I already have an entry in custom.css for MMM-NetworkScanner. I tried your suggestion as a separate entry. Am I supposed to incorporate it into the existing entry?

              body {
              margin: 20px;
              height: calc(100% - 40px);
              width: calc(100% - 40px);
              }

              .MMM-NetworkScanner .fa-ul {
              margin-left: 2px;
              }

              .MMM-WunderGround .max-temp {
              color: #f66;
              }

              Create a working config
              How to add modules

              1 Reply Last reply Reply Quote 0
              • Mykle1
                Mykle1 Project Sponsor Module Developer @tosti007 last edited by

                @tosti007 said in Go East, young icon!:

                Note: I am currently on mobile so have no way of testing it. If it doesn’t work then let me know and i will search another solution (and I will be confused since I am pretty sure this works)

                I tried this after going the custom.css route and it did not work.

                Thank you for your suggestion

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • Mykle1
                  Mykle1 Project Sponsor Module Developer @strawberry 3.141 last edited by Mykle1

                  @strawberry-3.141 said in Go East, young icon!:

                  you can achieve this without modifying the code

                  Strawberry-3.141 deserves an award. He went above and beyond in helping me customize the NetworkScanner module for me. Apparently, he is a genius, and willing to work well past midnight to help someone (me) with their MM. You have my highest praise.

                  All credit for this custom.css goes to Strawberry-3.141
                  }
                  .MMM-NetworkScanner .fa-ul {
                  margin-left: 2px; /* This aligned NetworkScanner to the left margin /
                  width: 130px; /
                  If you remove this line it will be the same width as the widest module in the region, this can lead to a big gap, thats why i limited it to 130px if you add devices with longer names you might want to increase this value */
                  }

                  .MMM-NetworkScanner .fa-li {
                  position: relative; /* This put the icon on the right side */
                  float: right;
                  left: initial;
                  }

                  0_1487212483120_IMG_1749.JPG

                  I dreamed it. He made it happen.

                  Create a working config
                  How to add modules

                  slametps 1 Reply Last reply Reply Quote 0
                  • slametps
                    slametps @Mykle1 last edited by

                    @Mykle1 said in Go East, young icon!:

                    .MMM-NetworkScanner .fa-ul {
                    margin-left: 2px; /* This aligned NetworkScanner to the left margin /
                    width: 130px; / If you remove this line it will be the same width as the widest module in the region, this can lead to a big gap, thats why i limited it to 130px if you add devices with longer names you might want to increase this value /
                    }
                    .MMM-NetworkScanner .fa-li {
                    position: relative; /
                    This put the icon on the right side */
                    float: right;
                    left: initial;
                    }

                    @strawberry-3-141 : How to make icon on the left, but without margin?

                    regards,

                    Slamet PS

                    Mykle1 strawberry 3.141 2 Replies Last reply Reply Quote 0
                    • Mykle1
                      Mykle1 Project Sponsor Module Developer @slametps last edited by

                      @slametps said in Go East, young icon!:

                      How to make icon on the left, but without margin?

                      The icon is on the left by default

                      Create a working config
                      How to add modules

                      1 Reply Last reply Reply Quote 0
                      • strawberry 3.141
                        strawberry 3.141 Project Sponsor Module Developer @slametps last edited by

                        @slametps the space on the left ogf the icon or the space between the icon and the name?

                        Please create a github issue if you need help, so I can keep track

                        slametps 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy