• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

My display so far...

Scheduled Pinned Locked Moved Showcase
66 Posts 18 Posters 76.1k Views 22 Watching
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.
  • J Offline
    j.e.f.f Project Sponsor Module Developer @cowboysdude
    last edited by j.e.f.f May 12, 2017, 5:20 PM May 7, 2017, 9:40 PM

    @cowboysdude In my case, I’ve also changed the HTML markup. It’s difficult to move things around in the CSS when the visual elements are marked up with tables. So in many cases the markup has been changed significantly – especially in the sports modules – so that I was free to position things as I wished.

    In some case using tables makes sense. For example the weather forecast is tabular data, so using a table to present the information is appropriate. But when you use tables, your layout is pretty much fixed to be in a table format, and the information will always be presented in the order that it is marked up. For example, for the sports modules, I wanted the visiting team’s scores first (i.e. on the left) and the home team’s score second (on the right). The NHL module had this reversed. I also wanted to hide the scores when the game hadn’t yet started. So the logos are marked up first, then the game status. Based on the status, I decide whether to markup the scores. So the markup looks like this:

    <div>
      <img src="modules/MMM-NHL/icons/NSH.svg" class="team-logo home" />
      <img src="modules/MMM-NHL/icons/STL.svg" class="team-logo visitor" />
      < span class="status in-progress">
        < span class="live time">13:45< /span>
        < span class="period">3< sup>RD< /span>
      < /span>
      < span class="score home">2< /span>
      < span class="score visitor">1< /span>
    </div>
    

    Elements are written in this order:

    1. Home Team’s logo
    2. Visiting Team’s logo
    3. Game status
    4. Home Team’s score
    5. Visiting Team’s score

    But with the CSS, I’m able to position them in this order:

    1. Visiting Team’s logo
    2. Visiting Team’s score
    3. Game status
    4. Home Team’s score
    5. Home Team’s logo

    Scores and logos are positioned relative the their respective left and right edges, while the status is centered. So this layout will adapt to changing container widths. And if I wanted to swap the display to have home team on the left, and visitor on the right, it’s a simple CSS change, with no need to touch the markup.

    So it works out better to render each piece as its own HTML element (e.g.: div, span, p, img, etc), and then position them using CSS. This gives you WAY more flexibility. Maybe the way forward here is to work with the module devs to change their markup to something that lends itself to more flexible CSS styling.


    P.S. Does anyone know how to make span elements show up in markdown? I had to put spaces between the < character and span>, otherwise they don’t show up in the code block. Also have the same problem with the class name on the outer div. There should class="box-score" on that element.

    1 Reply Last reply Reply Quote 1
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer @j.e.f.f
      last edited by May 7, 2017, 10:11 PM

      @j.e.f.f you can create a fork of the module and push your changes to it then everyone can clone your fork

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

      J 1 Reply Last reply May 7, 2017, 10:29 PM Reply Quote 1
      • J Offline
        j.e.f.f Project Sponsor Module Developer @strawberry 3.141
        last edited by May 7, 2017, 10:29 PM

        @strawberry-3.141 Thanks! I’ll see if I can figure that out.

        1 Reply Last reply Reply Quote 0
        • J Offline
          j.e.f.f Project Sponsor Module Developer
          last edited by j.e.f.f May 12, 2017, 4:25 PM May 12, 2017, 4:09 PM

          OK Here’s my first crack at this. I’ve forked mrx-work-traffic to make MMM-MyCommute.

          [card:jclarke0000/MMM-MyCommute]

          https://github.com/jclarke0000/MMM-MyCommute

          Will work on the others soon.

          1 Reply Last reply Reply Quote 0
          • J Offline
            j.e.f.f Project Sponsor Module Developer
            last edited by May 12, 2017, 6:38 PM

            …and MMM-MyWeather:

            [card:jclarke0000/MMM-MyWeather]

            https://github.com/jclarke0000/MMM-MyWeather

            R 1 Reply Last reply Jun 24, 2017, 8:58 AM Reply Quote 0
            • R Offline
              ring23
              last edited by May 12, 2017, 8:13 PM

              Awesome! Do you plan on making a module for the Sports Scores? If not, can you PM me the files?

              J C 2 Replies Last reply May 12, 2017, 8:16 PM Reply Quote 0
              • J Offline
                j.e.f.f Project Sponsor Module Developer @ring23
                last edited by May 12, 2017, 8:16 PM

                @ring23 I actually plan on making a new sports module that combines all the sports into one.

                1 Reply Last reply Reply Quote 0
                • C Offline
                  cowboysdude Module Developer @ring23
                  last edited by May 12, 2017, 9:33 PM

                  @ring23 There are already several…

                  1 Reply Last reply Reply Quote 0
                  • J Offline
                    j.e.f.f Project Sponsor Module Developer
                    last edited by May 13, 2017, 12:00 AM

                    Here’s my calendar app. Configuration is identical to the default calendar app. if you clone this, then change your calendar config to MMM-MyCalendar, it should just work.

                    [card:jclarke0000/MMM-MyCalendar]

                    https://github.com/jclarke0000/MMM-MyCalendar.git

                    1 Reply Last reply Reply Quote 0
                    • J Offline
                      j.e.f.f Project Sponsor Module Developer
                      last edited by May 13, 2017, 12:15 AM

                      I should mention that I have a few rules in my custom CSS that apply to all modules. You won’t get my exact same visual style with just these modules alone. Add whichever rules you want from those below into your custom.css file:

                      /* Limit the width of the left and right columns to 300px */
                      .region.right .module-content,
                      .region.left .module-content {
                        max-width: 300px;
                      }
                      
                      /* Increase vertical spacing of text in table cells */
                      table td {
                        line-height: 1.75;
                      }
                      
                      /* Allows styling of row elements in tables.  You need this for the next rule */
                      table.small {
                        border-collapse:collapse;
                      }
                      
                      /* Add an underline to table rows - also requires the rule above this one */
                      table tr {
                        border-bottom: solid 1px #222;
                      }
                      
                      /* blue colour styling for module headers */
                      .module-header {
                        color: #82bae5;
                        border-bottom-color: #82bae5;
                        font-size: 15.5px;
                        font-family: "Roboto";
                      }
                      
                      R 1 Reply Last reply Jan 13, 2018, 8:40 AM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 6
                      • 7
                      • 2 / 7
                      2 / 7
                      • First post
                        19/66
                        Last post
                      Enjoying MagicMirror? Please consider a donation!
                      MagicMirror created by Michael Teeuw.
                      Forum managed by Sam, technical setup by Karsten.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy