• 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 30.0k 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.
  • I Offline
    Ihnen42
    last edited by Nov 27, 2020, 10:59 PM

    Hi, the region bottom bar has four elements. The bottom bar, the bottom left, the bottom center and the bottom right. Since they are in a grid with thirds, one always get pushed to the next row. Since I only use the bottom bar and not the left/center/right I changed the grid-template-columns: 100% 0% 0% 0%; So the bar is 100% and the rest each 0%.

    1 Reply Last reply Reply Quote 0
    • E Offline
      earlman
      last edited by earlman Mar 30, 2021, 4:26 PM Mar 30, 2021, 4:23 PM

      HI GUYS,

      Sorry I’ve been MIA. Recently moved to a new condo, so I’ve been busy with that. Finally have some time to take a look at this, so expect some updates in the near future.

      Thank you all for the interest ☺

      1 Reply Last reply Reply Quote 0
      • E Offline
        earlman @dbinott
        last edited by Mar 30, 2021, 8:29 PM

        @dbinott @jcmd13 @RuKeBo @Mykle1

        Add

        .top.bar > .container {
            grid-column: 1 / -1;
        }
        

        to your main.css.

        I think that’ll do the trick. I don’t have any modules with notifications installed atm, so if somebody could post a screenshot of how that looks (after adding the above CSS), it would be a big help

        1 Reply Last reply Reply Quote 0
        • E Offline
          earlman
          last edited by earlman Apr 5, 2021, 4:15 AM Apr 5, 2021, 4:04 AM

          @aarish could you post some screenshots?

          I’ve updated the main.css file here:
          https://github.com/foundations-design/WhiteLight/blob/master/css/main.css

          I think the part that’s relevant to your issue is from “Layout Stuff” down (line 144 in the main.css file)

          B 1 Reply Last reply Apr 5, 2021, 11:55 AM Reply Quote 0
          • B Offline
            BravoOscar @earlman
            last edited by Apr 5, 2021, 11:55 AM

            @earlman

            As you can see, the top_bar and bottom_bar dosent work.

            The calender should be in the bottom_bar and the stock should be in the top_bar

            2021-04-05-135145_1080x1920_scrot.png

            1 Reply Last reply Reply Quote 0
            • E Offline
              earlman
              last edited by earlman Apr 5, 2021, 2:53 PM Apr 5, 2021, 2:52 PM

              @bravooscar

              thanks for the screenshot. try using this css for your main.css

              :root {
                  /**** COLOR ****/
                  --color-text: #fff;
                  --color-background: black;
              
                  /**** TYPOGRAPHY ****/
                  --font-primary: "Roboto Condensed";
                  --font-secondary: "Roboto";
                  --base: 20px;
                  --text-scale: 1.5;
                  --text-xs: calc(var(--base) / var(--text-scale));
                  --text-sm: var(--base);
                  --text-md: calc(var(--text-sm) * var(--text-scale));
                  --text-lg: calc(var(--text-md) * var(--text-scale));
                  --text-xl: calc(var(--text-lg) * var(--text-scale));
                  --text-2xl: calc(var(--text-xl) * var(--text-scale));
                  --text-3xl: calc(var(--text-2xl) * var(--text-scale));
              
                  /**** SPACING ****/
                  --grid-gap: 1rem;
                  --outside-margin: 4rem;
              }
              
              html {
                cursor: none;
                overflow: hidden;
                background: var(--color-background);
                user-select: none;
                font-size: var(--base);
              }
              
              ::-webkit-scrollbar {
                display: none;
              }
              
              body {
                background: var(--color-background);
                color: var(--color-text);
                font-family: var(--font-primary), sans-serif;
                font-weight: 400;
                line-height: 1.5;
                margin: 0;
                -webkit-font-smoothing: antialiased;
              }
              
              /**
               * Default styles.
               */
              
              .dimmed {
                color: var(--color-text);
                opacity: 0.4;
              }
              
              .normal {
                color: var(--color-text);
                opacity: 0.7;
              }
              
              .bright {
                color: var(--color-text);
                opacity: 1;
              }
              
              .xsmall {
                font-size: var(--text-xs);
                line-height: 1.4;
              }
              
              .small {
                font-size: var(--text-sm);
                line-height: 1.4;
              }
              
              .medium {
                font-size: calc(var(--text-md));
                line-height: 1.4;
              }
              
              .large {
                font-size: calc(var(--text-lg));
                line-height: 1;
              }
              
              .xlarge {
                font-size: calc(var(--text-xl));
                line-height: 1;
                letter-spacing: -3px;
              }
              
              .thin {
                font-family: var(--font-secondary), sans-serif;
                font-weight: 100;
              }
              
              .light {
                font-family: var(--font-primary), sans-serif;
                font-weight: 300;
              }
              
              .regular {
                font-family: var(--font-primary), sans-serif;
                font-weight: 400;
              }
              
              .bold {
                font-family: var(--font-primary), sans-serif;
                font-weight: 700;
              }
              
              .align-right {
                text-align: right;
              }
              
              .align-left {
                text-align: left;
              }
              
              header {
                text-transform: uppercase;
                font-size: 1rem;
                font-family: var(--font-primary), Arial, Helvetica, sans-serif;
                font-weight: 400;
                border-bottom: 1px solid #666;
                line-height: 15px;
                padding-bottom: 5px;
                margin-bottom: 10px;
                color: #999;
              }
              
              sup {
                font-size: 50%;
                line-height: 50%;
              }
              
              /**
               * Module styles.
               */
              
              .module {
                margin-bottom: 30px;
              }
              
              .region.bottom .module {
                margin-top: 30px;
                margin-bottom: 0;
              }
              
              .no-wrap {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              
              .pre-line {
                white-space: pre-line;
              }
              
              /**
               *
               * LAYOUT STUFF
               *
               */
              .region {
                width: 100%;
              }
              
              .region.fullscreen {
                position: absolute;
                height: 100vh;
                width: 100vw;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
                pointer-events: none;
              }
              .region.fullscreen * {
                pointer-events: auto;
              }
              
              .region table {
                width: 100%;
                border-spacing: 0;
                border-collapse: separate;
              }
              
              body {
                display: grid;
                grid-gap: var(--grid-gap);
                grid-template-rows: repeat(5, minmax(0, max-content));
                padding: var(--outside-margin);
                place-items: stretch;
                height: 100vh;
              }
              
              .top.bar {
                display: grid;
                grid-gap: var(--grid-gap);
                grid-template-columns: repeat(3, 1fr);
              }
              
              .top.bar > .container {
                grid-column: 1 / -1;
              }
              
              .bottom.bar {
                display: grid;
                grid-gap: var(--grid-gap);
                grid-template-columns: repeat(3, 1fr);
              }
              
              .bottom.bar > .container {
                grid-column: 1 / -1;
              }
              
              .left {
                grid-column: 1 / 2;
              }
              
              .right {
                grid-column: -1 / -2;
              }
              
              .region {
                /* for testing */
                /* border: 1px solid white;  */
              }
              
              
              B 1 Reply Last reply Apr 5, 2021, 4:26 PM Reply Quote 0
              • B Offline
                BravoOscar @earlman
                last edited by BravoOscar Apr 5, 2021, 4:37 PM Apr 5, 2021, 4:26 PM

                @earlman
                Tryed the new main.css

                2021-04-05-182116_1080x1920_scrot.png

                Stock i working, it should be “top_bar”.
                Calender should be position: “bottom_bar”, under travle time, but bottom_bar is over bottom_left, bottom_center and bottom_right

                E 1 Reply Last reply Apr 8, 2021, 6:38 PM Reply Quote 0
                • E Offline
                  earlman @BravoOscar
                  last edited by Apr 8, 2021, 6:38 PM

                  @bravooscar
                  try this:

                  :root {
                    /**** COLOR ****/
                    --color-text: #fff;
                    --color-background: black;
                  
                    /**** TYPOGRAPHY ****/
                    --font-primary: "Roboto Condensed";
                    --font-secondary: "Roboto";
                    --base: 20px;
                    --text-scale: 1.5;
                    --text-xs: calc(var(--base) / var(--text-scale));
                    --text-sm: var(--base);
                    --text-md: calc(var(--text-sm) * var(--text-scale));
                    --text-lg: calc(var(--text-md) * var(--text-scale));
                    --text-xl: calc(var(--text-lg) * var(--text-scale));
                    --text-2xl: calc(var(--text-xl) * var(--text-scale));
                    --text-3xl: calc(var(--text-2xl) * var(--text-scale));
                  
                    /**** SPACING ****/
                    --grid-gap: 1rem;
                    --outside-margin: 4rem;
                  }
                  
                  html {
                    cursor: none;
                    overflow: hidden;
                    background: var(--color-background);
                    user-select: none;
                    font-size: var(--base);
                  }
                  
                  ::-webkit-scrollbar {
                    display: none;
                  }
                  
                  body {
                    background: var(--color-background);
                    color: var(--color-text);
                    font-family: var(--font-primary), sans-serif;
                    font-weight: 400;
                    line-height: 1.5;
                    margin: 0;
                    -webkit-font-smoothing: antialiased;
                  }
                  
                  /**
                   * Default styles.
                   */
                  
                  .dimmed {
                    color: var(--color-text);
                    opacity: 0.4;
                  }
                  
                  .normal {
                    color: var(--color-text);
                    opacity: 0.7;
                  }
                  
                  .bright {
                    color: var(--color-text);
                    opacity: 1;
                  }
                  
                  .xsmall {
                    font-size: var(--text-xs);
                    line-height: 1.4;
                  }
                  
                  .small {
                    font-size: var(--text-sm);
                    line-height: 1.4;
                  }
                  
                  .medium {
                    font-size: calc(var(--text-md));
                    line-height: 1.4;
                  }
                  
                  .large {
                    font-size: calc(var(--text-lg));
                    line-height: 1;
                  }
                  
                  .xlarge {
                    font-size: calc(var(--text-xl));
                    line-height: 1;
                    letter-spacing: -3px;
                  }
                  
                  .thin {
                    font-family: var(--font-secondary), sans-serif;
                    font-weight: 100;
                  }
                  
                  .light {
                    font-family: var(--font-primary), sans-serif;
                    font-weight: 300;
                  }
                  
                  .regular {
                    font-family: var(--font-primary), sans-serif;
                    font-weight: 400;
                  }
                  
                  .bold {
                    font-family: var(--font-primary), sans-serif;
                    font-weight: 700;
                  }
                  
                  .align-right {
                    text-align: right;
                  }
                  
                  .align-left {
                    text-align: left;
                  }
                  
                  header {
                    text-transform: uppercase;
                    font-size: 1rem;
                    font-family: var(--font-primary), Arial, Helvetica, sans-serif;
                    font-weight: 400;
                    border-bottom: 1px solid #666;
                    line-height: 15px;
                    padding-bottom: 5px;
                    margin-bottom: 10px;
                    color: #999;
                  }
                  
                  sup {
                    font-size: 50%;
                    line-height: 50%;
                  }
                  
                  /**
                   * Module styles.
                   */
                  
                  .module {
                    margin-bottom: 30px;
                  }
                  
                  .region.bottom .module {
                    margin-top: 30px;
                    margin-bottom: 0;
                  }
                  
                  .no-wrap {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  
                  .pre-line {
                    white-space: pre-line;
                  }
                  
                  /**
                   *
                   * LAYOUT STUFF
                   *
                   */
                  .region {
                    width: 100%;
                  }
                  
                  .region.fullscreen {
                    position: absolute;
                    height: 100vh;
                    width: 100vw;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: -1;
                    pointer-events: none;
                  }
                  .region.fullscreen * {
                    pointer-events: auto;
                  }
                  
                  .region table {
                    width: 100%;
                    border-spacing: 0;
                    border-collapse: separate;
                  }
                  
                  body {
                    display: grid;
                    grid-gap: var(--grid-gap);
                    grid-template-rows: repeat(5, minmax(0, max-content));
                    padding: var(--outside-margin);
                    place-items: stretch;
                    height: 100vh;
                  }
                  
                  .top.bar {
                    display: grid;
                    grid-gap: var(--grid-gap);
                    grid-template-columns: repeat(3, 1fr);
                  }
                  
                  .top.bar > .container {
                    grid-column: 1 / -1;
                  }
                  
                  .bottom.bar {
                    display: grid;
                    grid-gap: var(--grid-gap);
                    grid-template-columns: repeat(3, 1fr);
                  }
                  
                  .bottom.bar > .container {
                    grid-column: 1 / -1;
                    grid-row: 2;
                  }
                  
                  .bottom.bar > .bottom {
                      grid-row: 1;
                  }
                  
                  .left {
                    grid-column: 1 / 2;
                  }
                  
                  .right {
                    grid-column: -1 / -2;
                  }
                  
                  /* for testing */
                  
                  .region {
                    /* border: 1px solid white; */
                  }
                  
                  1 Reply Last reply Reply Quote 1
                  • A Offline
                    aarish
                    last edited by Jul 14, 2021, 3:23 AM

                    This post is deleted!
                    1 Reply Last reply Reply Quote 0
                    • A Offline
                      aarish
                      last edited by Jul 14, 2021, 3:27 AM

                      @earlman The redesign looks really cool and I love the concept you are going for. I wanted to try it on my mirror however I could not access the notion page with the set up instructions as it says I don’t have access. Is their another place with the instruction?

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 4 / 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