Merge pull request #366 from dkanada/margin

Minor fixes for section headers

src/components/cardbuilder/card.css

@@ -32,6 +32,8 @@ button {
 
 .itemsContainer {
     display: flex;
+    margin-left: -0.6em;
+    margin-right: -0.6em;
 }
 
 .vertical-list {
@@ -77,7 +79,7 @@ button {
 
 .cardBox {
     padding: 0 !important;
-    margin: .42em;
+    margin: 0.6em;
     transition: none;
     border: 0 solid transparent;
     /* These both are needed in case cardBox is a button */
@@ -86,25 +88,10 @@ button {
     contain: layout style;
 }
 
-/*.cardBox-withfocuscontent {
-    margin: .68em;
-}*/
-
-@media (min-width: 50em) {
-
-    .cardBox {
-        margin: .9em;
-    }
-}
-
 .cardBox-withfocuscontent-large {
     margin: .4em;
 }
 
-/*.card-focuscontent {
-    border: .12em solid transparent;
-}*/
-
 .card-focuscontent-large {
     border: .5em solid transparent;
 }
@@ -123,7 +110,6 @@ button {
 }
 
 @media (max-width: 50em) {
-
     .cardBox-bottompadded {
         margin-bottom: 1.2em !important;
     }
@@ -213,9 +199,9 @@ button {
     font-size: inherit;
 }
 
-    .cardContent-button:not(.defaultCardBackground) {
+.cardContent-button:not(.defaultCardBackground) {
     background-color: transparent;
-    }
+}
 
 .visualCardBox .cardContent {
     border-bottom-left-radius: 0;
@@ -371,9 +357,9 @@ button {
     justify-content: center;*/
 }
 
-    .textActionButton:hover {
+.textActionButton:hover {
     text-decoration: underline;
-    }
+}
 
 .cardImageIcon {
     font-size: 5em;

src/components/homesections/homesections.js

@@ -414,12 +414,8 @@ define(['connectionManager', 'cardBuilder', 'appSettings', 'dom', 'apphost', 'la
         var scrollX = !layoutManager.desktop;
 
         if (userViews.length) {
-
             html += '<div class="verticalSection">';
-
-            html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
             html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + globalize.translate('HeaderMyMedia') + '</h2>';
-            html += '</div>';
 
             if (scrollX) {
                 html += '<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true"><div is="emby-itemscontainer" class="scrollSlider focuscontainer-x padded-left padded-right">';

src/css/librarybrowser.css

@@ -887,10 +887,6 @@
     margin-bottom: 2.7em
 }
 
-.sectionTitleContainer {
-    margin: 1.25em 0
-}
-
 .sectionTitleButton,
 .sectionTitleIconButton {
     margin-right: 0 !important;
@@ -898,30 +894,22 @@
     vertical-align: middle
 }
 
-.sectionTitleContainer-cards {
-    margin-bottom: .1em
+.sectionTitleContainer {
+    margin: 1.25em 0;
 }
 
-.sectionTitle {
-    margin-bottom: 1em
+.sectionTitleContainer > .sectionTitle {
+    margin: 0;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.sectionTitleContainer-cards {
+    margin-bottom: 0;
 }
 
 .sectionTitle-cards {
-    margin-left: .28em;
-    margin-bottom: 0
-}
-
-@media all and (min-width:50em) {
-    .sectionTitle-cards {
-        margin-left: .55em
-    }
-}
-
-.sectionTitleContainer>.sectionTitle {
-    margin-top: 0;
     margin-bottom: 0;
-    display: inline-block;
-    vertical-align: middle
 }
 
 .sectionTitleButton {
@@ -930,7 +918,7 @@
     flex-shrink: 0
 }
 
-.sectionTitleButton+.sectionTitleButton {
+.sectionTitleButton + .sectionTitleButton {
     margin-left: .5em !important
 }
 

src/css/videoosd.css

@@ -14,7 +14,6 @@
 }
 
 .osdHeader {
-    padding-bottom: 3vh;
     -webkit-transition: opacity .3s ease-out;
     -o-transition: opacity .3s ease-out;
     transition: opacity .3s ease-out;

src/dashboard.html

@@ -32,8 +32,8 @@
                 </div>
 
                 <div class="dashboardSection" style="padding-left: 0;">
-                    <a is="emby-linkbutton" href="devices.html" style="margin-left:.8em!important;" class="button-flat sectionTitleTextButton">
-                        <h3 style="margin:0;">${HeaderActiveDevices}</h3>
+                    <a is="emby-linkbutton" href="devices.html" class="button-flat sectionTitleTextButton">
+                        <h3>${HeaderActiveDevices}</h3>
                         <i class="md-icon">&#xE5CC;</i>
                     </a>
                     <div class="activeDevices itemsContainer vertical-wrap">

src/scripts/librarymenu.js

@@ -281,7 +281,7 @@ define(["dom", "layoutManager", "inputManager", "connectionManager", "events", "
             pageIds: ["userProfilesPage", "newUserPage", "editUserPage", "userLibraryAccessPage", "userParentalControlPage", "userPasswordPage"],
             icon: "people"
         }, {
-            name: globalize.translate("TabLibrary"),
+            name: globalize.translate("HeaderLibraries"),
             href: "library.html",
             pageIds: ["mediaLibraryPage", "librarySettingsPage", "libraryDisplayPage", "metadataImagesConfigurationPage", "metadataNfoPage"],
             icon: "folder"

src/selectserver.html

@@ -1,7 +1,7 @@
 <div id="selectServerPage" data-role="page" class="page noSecondaryNavPage standalonePage pageContainer fullWidth vertical flex flex-direction-column">
     <div class="verticalSection flex-shrink-zero flex flex-direction-column" style="margin: 2em 0 1em;">
         <div class="padded-left padded-right flex align-items-center justify-content-center" style="margin-bottom:2em;">
-            <h1 class="sectionTitle sectionTitle-cards" style="margin:0;">${HeaderSelectServer}</h1>
+            <h1 class="sectionTitle sectionTitle-cards">${HeaderSelectServer}</h1>
         </div>
         <div class="padded-top padded-bottom-focusscale flex-grow flex" data-mousewheel="false" data-horizontal="true" data-centerfocus="card">
             <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x padded-left padded-right servers flex-grow" style="display: block; text-align: center;" data-hovermenu="false" data-multiselect="false"></div>

src/userprofiles.html

@@ -4,22 +4,17 @@
         <div class="content-primary">
             <div class="verticalSection verticalSection-extrabottompadding">
                 <div class="sectionTitleContainer sectionTitleContainer-cards">
-                    <h2 class="sectionTitle sectionTitle-cards">
-                        <span>${HeaderUsers}</span>
-                    </h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderUsers}</h2>
                     <button is="emby-button" type="button" class="fab btnAddUser submit sectionTitleButton" style="margin-left:1em;" title="${ButtonAddUser}">
                         <i class="md-icon">&#xE145;</i>
                     </button>
                     <a style="margin-left:2em!important;" is="emby-linkbutton" class="raised button-alt headerHelpButton" target="_blank" href="https://jellyfin.readthedocs.io/en/latest/server/users/">${Help}</a>
                 </div>
-                <div class="localUsers itemsContainer vertical-wrap" style="margin-top: .5em;"></div>
+                <div class="localUsers itemsContainer vertical-wrap"></div>
             </div>
-
             <div class="sectionPendingGuests verticalSection hide">
                 <div class="sectionTitleContainer">
-                    <h2 class="sectionTitle">
-                        ${HeaderPendingInvitations}
-                    </h2>
+                    <h2 class="sectionTitle">${HeaderPendingInvitations}</h2>
                 </div>
                 <div class="itemsContainer vertical-wrap pending" style="margin-top:.5em;"></div>
             </div>