• 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.

Magic Mirror Redesign WIP :D

Scheduled Pinned Locked Moved Showcase
47 Posts 21 Posters 25.3k Views 26 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.
  • E Offline
    earlman
    last edited by May 22, 2019, 9:52 PM

    This is how it currently looks

    0_1558561855468_v0.1.0.PNG

    This is what I’m planning for the eventual v1.0.0 release:

    0_1558561881000_v1.0.0-preview.png

    If you’re interested in how I did this, let me know. I dove pretty deep into the development. Here’s some not-so-apparent features I’ve added:

    • Refactored the Layout in main.css to use CSS Grid
      • This allows for a more flexible layout that’s easier to work with
    • Modified MMM-Wallpaper to load images from Pexels
    • Using two instances of MMM-Todoist to load my “Daily Highlight” for the day
    • After 6:00pm, changes the Daily Highlight to tomorrow’s highlight
    S B L N M 6 Replies Last reply May 27, 2019, 8:04 PM Reply Quote 3
    • S Offline
      skibro @earlman
      last edited by May 27, 2019, 8:04 PM

      @earlman HI! That looks fantastic, very nice work! Which calendar modul are you planning to use? I would love something like this - in weekly view. I would be greatful if you could point me in the right direction with this. Thanks for sharing!

      E 1 Reply Last reply May 28, 2019, 7:34 AM Reply Quote 0
      • E Offline
        earlman @skibro
        last edited by May 28, 2019, 7:34 AM

        @skibro hiyaa! This is the one I’ve used in the past. It has the best documentation and is the most stripped down, making it the easiest to style. Tons of config options, too.

        S 1 Reply Last reply May 28, 2019, 11:55 AM Reply Quote 0
        • S Offline
          skibro @earlman
          last edited by May 28, 2019, 11:55 AM

          @earlman Hiyaa! Thanks for your reply. I will try the linked module - I am quite new to js and css, would you mind to share some of your calendar related CSS? I am especially curious of the upper border styiling in the second image you posted. Thanks in advance, have a great day!

          E 1 Reply Last reply May 28, 2019, 10:15 PM Reply Quote 0
          • E Offline
            earlman @skibro
            last edited by May 28, 2019, 10:15 PM

            @skibro That’s actually just a mockup I made in Figma (a design tool). I haven’t built that into my mirror yet, by since you’re interested, I’ll move that up the priority list. I’ll post back here when I have something up on github.

            1 Reply Last reply Reply Quote 0
            • B Offline
              bachoo786 @earlman
              last edited by Jul 23, 2019, 11:13 AM

              @earlman this looks proper nice do you mind sharing the whole lot i.e. your css, the wallpapers etc?

              Thanks.

              1 Reply Last reply Reply Quote 0
              • E Offline
                earlman
                last edited by Aug 27, 2019, 10:46 PM

                @bachoo786 @skibro What modules are you guys currently using? I’m doing some prep work for release and wanna make sure it works with your current setups

                S 1 Reply Last reply Aug 29, 2019, 3:08 AM Reply Quote 0
                • ? Offline
                  A Former User
                  last edited by Aug 28, 2019, 7:18 AM

                  Is it possible to use horizontal layout instead vertical?

                  E 2 Replies Last reply Aug 28, 2019, 6:15 PM Reply Quote 1
                  • E Offline
                    earlman @Guest
                    last edited by Aug 28, 2019, 6:15 PM

                    @Sean yup! The reason I messed around with the CSS so much was to make it much more flexible with different screen sizes. I’ll post a screenshot once I get back to my computer

                    1 Reply Last reply Reply Quote 0
                    • E Offline
                      earlman @Guest
                      last edited by Aug 28, 2019, 10:14 PM

                      @Sean i like keeping it pretty minimal right now, but here’s what it looks like in landscape 0_1567030482787_25D7C3A6-B9CA-4000-97FB-A1B08E8810AD.png

                      ? 1 Reply Last reply Aug 29, 2019, 6:29 AM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 1 / 5
                      • First post
                        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