new title bar and header bar ui mechanics

zeropointnine · Sep 15, 2021 · adc3415 · adc3415
1 parent 4d57b6f
commit adc3415
Show file tree

Hide file tree

Showing 21 changed files with 293 additions and 247 deletions.
diff --git a/scss/album-view.scss b/scss/album-view.scss
@@ -1,8 +1,8 @@
 #albumView {
   padding-bottom:0; // bc last list item
   transition:
-      top $app-standard-duration cubic-bezier(0,.5,.3,1.0), // used for fade-in
-      opacity $app-standard-duration ease-out; // used for fade-out
+      transform $app-standard-duration cubic-bezier(0,.5,.3,1.0),
+      opacity $app-standard-duration ease-out;
 
   &.animIn {
     border-top: 1px solid var(--col-listitem);
@@ -47,9 +47,10 @@
 
     #albumViewArtist { // acts as a button
       display:inline-block;
-      padding:8px;
-      margin:-8px;
+      padding:8px 12px 8px 12px;
+      margin:-12px;
       border-radius: 6px;
+      background-color:var(--col-listitem-less);
       cursor:pointer;
       &:hover {
         background-color:var(--col-listitem);
@@ -278,17 +279,7 @@
   display:none;
   position:absolute;
   z-index:10000; // underneath bottombar
-  transition:
-    left $app-standard-duration cubic-bezier(0,.5,.3,1.0),
-    top $app-standard-duration cubic-bezier(0,.5,.3,1.0),
-    width $app-standard-duration ease-out,
-    height $app-standard-duration ease-out;
-
-  &.animOut {
-    transition:
-      left $app-standard-duration cubic-bezier(0,.5,.3,1.0),
-      top $app-standard-duration cubic-bezier(0,.5,.3,1.0),
-      width $app-standard-duration ease-out,
-      height $app-standard-duration ease-out;
-  }
+  transform-origin: top left;
+  transition: transform $app-standard-duration $app-standard-ease;
+  &.animOut { }
 }
diff --git a/scss/base.scss b/scss/base.scss
@@ -34,6 +34,8 @@
 
 // SASS values
 
+$site-min-width:320px;
+
 $mobile-max-width: 480px;
 $tablet-max-width: 768px;
 
@@ -57,6 +59,7 @@ $app-standard-duration: 400ms;
 // values of specific ui elements
 $top-bar-height: 52px;
 $view-header-height: 52px;
+$playbar-height: 100px;
 
 
 @mixin mobile {
@@ -144,9 +147,6 @@ $view-header-height: 52px;
 }
 
 body {
-	min-width: 320px;
-  display:flex;
-  flex-direction:column;
 	overflow-x: hidden;
   overflow-y: hidden;
 	background-color: var(--col-bg);

diff --git a/scss/library-view.scss b/scss/library-view.scss
@@ -93,6 +93,7 @@ $marginUnitMobile: 6px;
     display: none; // default
     width:$icon-button-side;
     height:$icon-button-side;
+    flex: 0 0 36px;
     &:before {
       @include iconBefore;
     }
@@ -306,7 +307,7 @@ $marginUnitMobile: 6px;
   }
   .libraryItemText1,
   .libraryItemText2 {
-    margin-right:26px;
+    margin-right:30px;
   }
 }
 

diff --git a/scss/playbar-view.scss b/scss/playbar-view.scss
@@ -4,7 +4,8 @@
   left:0;
   bottom:0;
   width:100%;
-  height:100px;
+  height:$playbar-height;
+  min-width:$site-min-width;
 	flex: 0 0 auto;
 	padding: 12px 0 0 0;
   background-color: var(--col-bg);
@@ -18,6 +19,7 @@
   margin-left:12px;
 
   // this impacts overall playbar height; careful
+  // todo refactor layout :/
   margin-top:1px;
   height:24px;
   margin-bottom:11px;
@@ -34,9 +36,9 @@
   }
 
   @include mobile {
-    margin-top:1px;
-    height:20px;
-    margin-bottom:11px;
+    margin-top:3px;
+    height:24px;
+    margin-bottom:9px;
 
     max-width: calc(100% - 108px);
   }

diff --git a/scss/playlist-and-history-view.scss b/scss/playlist-and-history-view.scss
@@ -14,7 +14,7 @@ $leftRightEase: ease-in-out;
   margin:0;
   padding:0;
   overflow:hidden;
-  transition: top $app-standard-duration $app-standard-ease;
+  transition: transform $app-standard-duration $app-standard-ease;
 
   &.animIn {
     border-top: 1px solid var(--col-listitem);

diff --git a/scss/shared.scss b/scss/shared.scss
@@ -33,16 +33,19 @@ label {
   position:absolute;
   width:100%;
   height:100%;
-  padding: $view-header-height $space-unit $space-unit $space-unit;
   overflow-y: scroll;
   background-color:var(--col-bg);
   transition: opacity $app-standard-duration $app-standard-ease;
 
   &:focus {
     outline: none
   }
+
+  padding: ($view-header-height - 8) $space-unit $space-unit $space-unit;
+  // ... results in 8px space btw header and subview content
+
   @include mobile {
-    padding:$space-unit-mobile;
+    padding: ($view-header-height - 8) $space-unit-mobile $space-unit-mobile $space-unit-mobile;
   }
 }
 

diff --git a/scss/top-level.scss b/scss/top-level.scss
@@ -5,15 +5,20 @@ html {
 // Is full area of viewport
 #page { }
 
-// see 'topbar.scss' for #topBar
+// Three main divs:
+// #topBar (see topbar.scss)
+// #mainArea
+// #playbarView (see playbar-view.scss)
 
 #mainArea {
   position:absolute;
   width:100%;
+  min-width: $site-min-width;
   top:$top-bar-height;
-  bottom:100px; // clear playbar // todo
-  background-color:var(--col-bg);
+  bottom:$playbar-height;
+
   overflow:hidden;
+  background-color:var(--col-bg);
 }
 
 // Allows us to know current breakpoint programmatically by inspecting element's width

diff --git a/scss/topbar.scss b/scss/topbar.scss
@@ -4,6 +4,7 @@
 
   width:100%;
   height: $top-bar-height;
+  min-width: $site-min-width;
   top:0;
   left:0;
 
@@ -17,24 +18,28 @@
   &.isAnimating {
     transition: margin-top $app-standard-duration ease-out;
   }
-  @include mobile {
-    // todo
-  }
 }
 
 #appLogo {
   position:absolute;
   top:0;
   left:0;
   z-index:9998;
+  transition: opacity $app-standard-duration ease-out;
+
+  @include mobile {
+    transform:scale(0.8); // lazy. looks better, actually; apply to main?
+    top:5px;
+    left:6px;
+  }
 }
 #appLogoInner {
   position:absolute;
-  top:-33px;
-  left:-7px;
+  top:-32px;
+  left:-6px;
 
   span {
-    font-size:74px;
+    font-size:72px;
     font-weight:900;
     color:var(--col-listitem);
   }
@@ -50,71 +55,44 @@
   span.v {
     margin-left:-4px;
   }
-
-  @include mobile {
-    top:-28px;
-    left:-5px;
-    span {
-      font-size: 61px;
-    }
-    span.q {
-      margin-left:-5px;
-    }
-    span.p {
-      margin-left:-5px;
-    }
-    span.w {
-      margin-left:-1px;
-    }
-    span.v {
-      margin-left:-3px;
-    }
-  }
 }
+
 #appTitle {
-  font-size:18px;
-  font-weight: bold;
-  color:var(--col-text-least);
-  flex: 1;
   visibility: hidden;
-  @include mobile {
-    font-size:16px;
-  }
+  color:var(--col-listitem-selected-over);
 }
 .lightTheme #appTitle {
   color:var(--col-listitem-selected);
 }
 
 #topBarButtons {
-  display:flex;
   margin-left:auto;
 }
-
-#settingsButton {
+#hqpSettingsButton {
   &:before {
-    background-image: url('./../img/icons/settings_white_24dp.svg');
+    background-image: url('./../img/icons/settings_applications_white_24dp.svg');
     opacity:0.66;
   }
   background-color: transparent;
   &:hover {
     background-color: var(--col-listitem-over);
   }
 }
-.settingsView #settingsButton,
-.hqpSettingsView #settingsButton{
-  visibility: hidden;
-}
-
-#hqpSettingsButton {
+#settingsButton {
   &:before {
-    background-image: url('./../img/icons/settings_applications_white_24dp.svg');
+    background-image: url('./../img/icons/settings_white_24dp.svg');
     opacity:0.66;
   }
   background-color: transparent;
   &:hover {
     background-color: var(--col-listitem-over);
   }
 }
+.settingsView #settingsButton,
+.hqpSettingsView #settingsButton{
+  visibility: hidden;
+}
+
 .settingsView #hqpSettingsButton,
 .hqpSettingsView #hqpSettingsButton{
   visibility: hidden;

diff --git a/scss/widgets.scss b/scss/widgets.scss
@@ -2,8 +2,6 @@
 
 
 .viewHeader {
-  background:rgba(255,0,0,0.1);
-
   position:absolute;
   display:flex;
   align-items:center;
@@ -13,20 +11,21 @@
   top:0; // lives in top padding area of subview
   left:0;
 
-  padding: $space-unit $space-unit $space-unit $space-unit;
+  padding: $space-unit ($space-unit * .5) $space-unit $space-unit;
   @include mobile {
     // todo
   }
 
+  transition: top ($app-standard-duration * .33) $app-standard-ease;
+
   .title {
     font-size: 16px;
     font-weight: bold;
-    line-height: $icon-button-side;
+    margin-top:-3px; // looks better
   }
   .headerCountText {
     margin-left:6px;
     font-size: $font-size-smaller;
-    padding-top:4px;
     color:var(--col-text-least);
   }
 }