(css) Reset H{1-6} headers

Fixes #4123
Alinto · Jan 17, 2018 · d4c8f50 · d4c8f50
1 parent 5b711de
commit d4c8f50
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 52 deletions.
diff --git a/UI/Templates/AdministrationUI/UIxAdministration.wox b/UI/Templates/AdministrationUI/UIxAdministration.wox
@@ -104,14 +104,12 @@
                   <md-icon>warning</md-icon>
                   <var:string label:value="No resource"/>
                 </md-list-item>
-                <md-list-item class="sg-folder" ng-repeat="folder in user.$$folders">
-                  <md-button class=""
+                <md-list-item class="sg-folder" ng-repeat="folder in user.$$folders"
                              aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
                              ng-click="app.selectFolder(folder)">
                     <md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
                                        'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
-                    {{::folder.displayName}}
-                  </md-button>
+                    <span class="sg-no-wrap" ng-bind="::folder.displayName"><!-- folder name --></span>
                 </md-list-item>
                 <md-divider><!-- divider --></md-divider>
               </div>

diff --git a/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox b/UI/Templates/AdministrationUI/UIxAdministrationAclEditor.wox
@@ -28,12 +28,12 @@
                            sg-email="::acl.user.c_email"
                            size="40">{{acl.user.$avatarIcon}}</sg-avatar-image>
           <div class="msg-header-content">
-            <h1 ng-class="{ 'sg-md-display-2--thin': isGtMedium,
-                            'sg-md-title': !isGtMedium }">{{::acl.user.cn}}</h1>
-            <h6 class="sg-md-display-2-subheader"><md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
+            <div ng-class="{ 'sg-md-display-2--thin': isGtMedium,
+                            'sg-md-title': !isGtMedium }">{{::acl.user.cn}}</div>
+            <div class="sg-md-display-2-subheader"><md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
                                                                        'icon-event': acl.folderType == 'Calendar' }"><!--icon--></md-icon>
             {{::acl.folder.name}}
-            </h6>
+            </div>
           </div>
         </div>
         <!-- only show the fab button on large screens -->

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -35,8 +35,8 @@
       </md-card-actions>
       <md-card-content>
         <hgroup class="header">
-          <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
+          <div class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></div>
+          <div class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</div>
         </hgroup>
 
         <form class="md-inline-form" name="contactForm"

diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -62,8 +62,8 @@
                              sg-src="editor.card.photoURL"
                              size="40">{{ editor.card.$avatarIcon }}</sg-avatar-image>
             <div class="msg-header-content">
-              <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname({html: true})"><!-- fullname --></h1>
-              <h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
+              <div class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname({html: true})"><!-- fullname --></div>
+              <div class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</div>
               <md-chips ng-model="editor.card.categories"
                         class="sg-readonly" readonly="true">
                 <md-chip-template>

diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -124,7 +124,7 @@
         </md-card-actions>
         <md-card-content>
           <div class="sg-padded">
-            <h5 ng-bind="viewer.message.subject"><!-- subject --></h5>
+            <h5 class="sg-md-headline" ng-bind="viewer.message.subject"><!-- subject --></h5>
             <time class="msg-date" datetime="viewer.message.date" ng-bind="::viewer.message.date"><!-- date --></time>
           </div>
           <div>
@@ -225,16 +225,16 @@
               <div class="md-margin" md-whiteframe="3">
                 <div class="md-padding" layout="row" layout-wrap="layout-wrap">
                   <div flex="50" flex-xs="100">
-                    <h6 class="md-subhead md-default-theme md-fg md-primary"
-                        ng-bind="::'Subject Name' | loc"><!-- Subject Name --></h6>
+                    <div class="md-subhead md-default-theme md-fg md-primary"
+                        ng-bind="::'Subject Name' | loc"><!-- Subject Name --></div>
                     <div ng-repeat="field in ::viewer.message.$smime.certificate.subject">
                       <div class="pseudo-input-label" ng-bind="field[0] | loc"><!-- label --></div>
                       <div class="pseudo-input-field md-body-1" ng-bind="field[1]"><!-- value --></div>
                     </div>
                   </div>
                   <div flex="50" flex-xs="100">
-                    <h6 class="md-subhead md-default-theme md-fg md-primary"
-                        ng-bind="::'Issuer' | loc"><!-- Issuer --></h6>
+                    <div class="md-subhead md-default-theme md-fg md-primary"
+                        ng-bind="::'Issuer' | loc"><!-- Issuer --></div>
                     <div ng-repeat="field in ::viewer.message.$smime.certificate.issuer">
                       <div class="pseudo-input-label" ng-bind="field[0] | loc"><!-- label --></div>
                       <div class="pseudo-input-field md-body-1" ng-bind="field[1]"><!-- value --></div>

diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -201,16 +201,16 @@
                     <div class="md-margin" md-whiteframe="3">
                       <div class="md-padding" layout="row" layout-wrap="layout-wrap">
                         <div flex="50" flex-xs="100">
-                          <h6 class="md-subhead md-default-theme md-fg md-primary"
-                              ng-bind="::'Subject Name' | loc"><!-- Subject Name --></h6>
+                          <div class="md-subhead md-default-theme md-fg md-primary"
+                               ng-bind="::'Subject Name' | loc"><!-- Subject Name --></div>
                           <div ng-repeat="field in $AccountDialogController.certificate.subject">
                             <div class="pseudo-input-label" ng-bind="field[0] | loc"><!-- label --></div>
                             <div class="pseudo-input-field md-body-1" ng-bind="field[1]"><!-- value --></div>
                           </div>
                         </div>
                         <div flex="50" flex-xs="100">
-                          <h6 class="md-subhead md-default-theme md-fg md-primary"
-                              ng-bind="::'Issuer' | loc"><!-- Issuer --></h6>
+                          <div class="md-subhead md-default-theme md-fg md-primary"
+                               ng-bind="::'Issuer' | loc"><!-- Issuer --></div>
                           <div ng-repeat="field in $AccountDialogController.certificate.issuer">
                             <div class="pseudo-input-label" ng-bind="field[0] | loc"><!-- label --></div>
                             <div class="pseudo-input-field md-body-1" ng-bind="field[1]"><!-- value --></div>

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -103,13 +103,13 @@
           <md-icon>access_time</md-icon>
           <div class="md-list-item-text" ng-show="editor.component.startDate">
             <label class="pseudo-input-label"><var:string label:value="Start"/></label>
-            <h3 ng-bind="::editor.component.localizedStartDate"><!-- start date --></h3>
-            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></h3>
+            <div ng-bind="::editor.component.localizedStartDate"><!-- start date --></div>
+            <div ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></div>
           </div>
           <div class="md-list-item-text" ng-show="editor.component.endDate">
             <label class="pseudo-input-label"><var:string label:value="End"/></label>
-            <h3 ng-bind="::editor.component.localizedEndDate"><!-- end date --></h3>
-            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedEndTime"><!-- end time --></h3>
+            <div ng-bind="::editor.component.localizedEndDate"><!-- end date --></div>
+            <div ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedEndTime"><!-- end time --></div>
           </div>
         </md-list-item>
         <!-- is transparent -->

diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -64,13 +64,13 @@
           <md-icon>access_time</md-icon>
           <div class="md-list-item-text" ng-show="::editor.component.startDate">
             <label class="pseudo-input-label"><var:string label:value="Start"/></label>
-            <h3 ng-bind="::editor.component.localizedStartDate"><!-- start date --></h3>
-            <h3 ng-hide="editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></h3>
+            <div ng-bind="::editor.component.localizedStartDate"><!-- start date --></div>
+            <div ng-hide="editor.component.isAllDay" ng-bind="::editor.component.localizedStartTime"><!-- start time --></div>
           </div>
           <div class="md-list-item-text" ng-show="::editor.component.dueDate">
             <label class="pseudo-input-label"><var:string label:value="Due Date"/></label>
-            <h3 ng-bind="::editor.component.localizedDueDate"><!-- due date --></h3>
-            <h3 ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedDueTime"><!-- due time --></h3>
+            <div ng-bind="::editor.component.localizedDueDate"><!-- due date --></div>
+            <div ng-hide="::editor.component.isAllDay" ng-bind="::editor.component.localizedDueTime"><!-- due time --></div>
           </div>
         </md-list-item>
         <!-- status -->

diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss
@@ -223,30 +223,33 @@ $h5-margin-base: 0;
 $h6-font-size-base: $sg-font-size-4;
 $h6-margin-base: 0;
 
-h1 {
-  font-size: $h1-font-size-base;
-  margin: $h1-margin-base;
-}
-h2 {
-  font-size: $h2-font-size-base;
-  margin: $h2-margin-base;
-}
-h3 {
-  font-size: $h3-font-size-base;
-  margin: $h3-margin-base;
-}
-h4 {
-  font-size: $h4-font-size-base;
-  margin: $h4-margin-base;
-}
-h5 {
-  font-size: $h5-font-size-base;
-  margin: $h5-margin-base;
-}
-h6 {
-  font-size: $h6-font-size-base;
-  margin: $h6-margin-base;
+.md-headline {
+  margin: 0;
 }
+// h1 {
+//   font-size: $h1-font-size-base;
+//   margin: $h1-margin-base;
+// }
+// h2 {
+//   font-size: $h2-font-size-base;
+//   margin: $h2-margin-base;
+// }
+// h3 {
+//   font-size: $h3-font-size-base;
+//   margin: $h3-margin-base;
+// }
+// h4 {
+//   font-size: $h4-font-size-base;
+//   margin: $h4-margin-base;
+// }
+// h5 {
+//   font-size: $h5-font-size-base;
+//   margin: $h5-margin-base;
+// }
+// h6 {
+//   font-size: $h6-font-size-base;
+//   margin: $h6-margin-base;
+// }
 
 // Base styles
 // ----------------------------------------------------------------------------

diff --git a/UI/WebServerResources/scss/views/AdministrationUI.scss b/UI/WebServerResources/scss/views/AdministrationUI.scss
@@ -1,4 +1,8 @@
 /// AdministrationUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
 [ui-view="administration"] {
+  md-list-item .md-list-item-inner > md-icon:first-child {
+    margin-left: $bl * 2;
+    margin-right: $bl * 2;
+  }
 }