Merge pull request #346 from huridocs/css-fixes

LGTM
huridocs · Aug 25, 2016 · 9d54649 · 9d54649
2 parents a8cdcd5 + 19f3d84
commit 9d54649
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 39 deletions.
diff --git a/app/react/App/scss/layout/_header.scss b/app/react/App/scss/layout/_header.scss
@@ -292,11 +292,10 @@ header {
     }
   }
 
-	.fa-arrow-left {
+	.fa-external-link {
 		position: absolute;
-		top: 8px;
+		top: 10px;
 		right: 15px;
-		transform: rotate(45deg);
 	}
 
 }

diff --git a/app/react/App/scss/layout/_nav.scss b/app/react/App/scss/layout/_nav.scss
@@ -61,27 +61,30 @@ nav ul {
 .nav-tabs>li {
   display: inline-block;
   float: none;
-  width: 100%;
-  max-width: 33%;
+  min-width: 54px
 }
 
 .nav-tabs>li>a, .nav-tabs>li>div {
   cursor:pointer;
-  line-height: 40px;
-  padding: 0;
-  margin-top: 5px;
+  line-height: 54px;
+  padding: 0 15px;
   background-color: transparent;
   color: $c-grey-dark;
   border: 0;
   border-bottom: 2px solid transparent;
   border-radius: 0;
+  .fa {
+    font-size: 16px;
+    position: relative;
+    top: 3px;
+  }
 }
 
 .nav-tabs>li>a:focus, .nav-tabs>li>div:focus, .nav-tabs>li>a:hover, .nav-tabs>li>div:hover {
   background-color: transparent;
   color: $c-black;
   border: 0;
-  border-bottom: 3px solid $c-grey-dark;
+  border-bottom: 2px solid $c-grey-dark;
 }
 
 
@@ -91,5 +94,5 @@ nav ul {
   background-color: transparent;
   color: $c-black;
   border: 0;
-  border-bottom: 3px solid $c-primary;
+  border-bottom: 2px solid $c-primary;
 }
diff --git a/app/react/App/scss/modules/_entity.scss b/app/react/App/scss/modules/_entity.scss
@@ -10,8 +10,15 @@
     top: 0 !important;
   }
   .sidepanel-header {
-    border: 0;
-    padding-bottom: 0;
+    display: none;
+  }
+  .sidepanel-body {
+    .item-name {
+      padding: 30px 30px 0;
+    }
+    .item-type {
+      margin-left: 30px;
+    }
   }
   dt {
     width: 25%;

diff --git a/app/react/Entities/components/EntityViewer.js b/app/react/Entities/components/EntityViewer.js
@@ -65,11 +65,7 @@ export class EntityViewer extends Component {
         <aside className="side-panel entity-metadata">
         <ShowIf if={!entityBeingEdited}>
           <div className="sidepanel-header">
-            <h1 className="item-name">{entity.title}</h1>
-            <span className="item-type item-type-2">
-              <i className="item-type__icon fa fa-bank"></i>
-              <span className="item-type__name">{entity.documentType}</span>
-            </span>
+
           </div>
         </ShowIf>
             <div className="sidepanel-footer">
@@ -97,6 +93,15 @@ export class EntityViewer extends Component {
               </NeedAuthorization>
             </div>
           <div className="sidepanel-body">
+            <ShowIf if={!entityBeingEdited}>
+              <h1 className="item-name">{entity.title}</h1>
+            </ShowIf>
+            <ShowIf if={!entityBeingEdited}>
+              <span className="item-type item-type-2">
+                <i className="item-type__icon fa fa-bank"></i>
+                <span className="item-type__name">{entity.documentType}</span>
+              </span>
+            </ShowIf>
           {(() => {
             if (entityBeingEdited) {
               return <EntityForm/>;
@@ -108,7 +113,15 @@ export class EntityViewer extends Component {
         </aside>
         <aside className="side-panel entity-connections">
           <div className="sidepanel-header">
-            <h1>Connections ({references.length})</h1>
+            <ul className="nav nav-tabs">
+              <li>
+                <div className="tab-link tab-link-active">
+                  <i className="fa fa-sitemap"></i>
+                  <span className="connectionsNumber">{references.length}</span>
+                </div>
+              </li>
+            </ul>
+            &nbsp;
           </div>
           <div className="sidepanel-body">
             <div className="item-group">

diff --git a/app/react/Layout/scss/sidepanel.scss b/app/react/Layout/scss/sidepanel.scss
@@ -56,15 +56,13 @@ $c-sidebar: $c-white;
 
   .fa-close {
     position: absolute;
-    top: 15px;
-    right: 15px;
-    font-size: 18px;
-    color: $c-grey;
-    cursor: pointer;
-    position: absolute;
-    top: 30px;
-    right: 30px;
-    font-size: 18px;
+    top: 0;
+    right: 0;
+    width: 54px;
+    height: 54px;
+    line-height: 54px;
+    text-align: center;
+    font-size: $f-size-lg;
     color: $c-grey;
     cursor: pointer;
     z-index: 2;
@@ -112,7 +110,7 @@ $c-sidebar: $c-white;
 .sidepanel-header,
 .sidepanel-footer {
   background: $c-sidebar;
-  padding: 30px;
+  padding: 18px 30px;
   z-index: 1;
 }
 
@@ -129,14 +127,26 @@ $c-sidebar: $c-white;
   }
 
   .nav-tabs {
-    margin: -15px;
-    margin-top: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 54px;
+    right: 54px;
+    border: 0;
+  }
+  .connectionsNumber {
+    position: relative;
+    top: 2px;
+    font-size: 11px;
+    line-height: 1em;
+    margin-left: 5px;
   }
 }
 .sidepanel-footer {
   position: absolute;
   bottom: 0;
   width: 100%;
+  padding-top: 0;
   text-align: center;
   background: linear-gradient(transparent 0%, $c-white 70%, $c-white 100%);
 

diff --git a/app/react/Library/components/Doc.js b/app/react/Library/components/Doc.js
@@ -57,7 +57,7 @@ export class Doc extends Component {
         </div>
         <ItemFooter>
           <Link to={documentViewUrl} className="item-shortcut">
-            <i className="fa fa-chevron-right"></i>
+            <i className="fa fa-external-link"></i>
           </Link>
         </ItemFooter>
       </RowList.Item>

diff --git a/app/react/Library/components/SearchBar.js b/app/react/Library/components/SearchBar.js
@@ -71,7 +71,7 @@ export class SearchBar extends Component {
               return <p key={index}>
                 <Link to={documentViewUrl}>
                   <span dangerouslySetInnerHTML={{__html: suggestion.title}}/>
-                  <i className="fa fa-arrow-left">
+                  <i className="fa fa-external-link">
                   </i>
                 </Link>
               </p>;

diff --git a/app/react/Library/components/ViewMetadataPanel.js b/app/react/Library/components/ViewMetadataPanel.js
@@ -58,8 +58,14 @@ export class ViewMetadataPanel extends Component {
     return (
       <SidePanel open={this.props.open}>
         <div className="sidepanel-header">
-          <h1>Metadata</h1>
-          <i className="fa fa-close close-modal" onClick={this.close.bind(this)}/>
+            <ul className="nav nav-tabs">
+              <li>
+                <div className="tab-link tab-link-active">
+                  <i className="fa fa-info-circle"></i>
+                </div>
+              </li>
+            </ul>
+            <i className="fa fa-close close-modal" onClick={this.close.bind(this)}/>&nbsp;
         </div>
         <div className="sidepanel-footer">
           <NeedAuthorization>

diff --git a/app/react/Viewer/components/ViewMetadataPanel.js b/app/react/Viewer/components/ViewMetadataPanel.js
@@ -53,22 +53,28 @@ export class ViewMetadataPanel extends Component {
     return (
       <SidePanel open={this.props.open} className="metadata-sidepanel">
         <div className="sidepanel-header">
-          <h1>Metadata</h1>
-          <i className="fa fa-close close-modal" onClick={this.close.bind(this)}/>
+          <i className="fa fa-close close-modal" onClick={this.close.bind(this)}/>&nbsp;
           <Tabs selectedTab={this.props.tab || 'metadata'}
             handleSelect={(tab) => {
               this.props.showTab(tab);
             }}
           >
             <ul className="nav nav-tabs">
               <li>
-                <TabLink to="toc">Table of contents</TabLink>
+                <TabLink to="toc">
+                  <i className="fa fa-indent"></i>
+                </TabLink>
               </li>
               <li>
-                <TabLink to="metadata" default>Metadata</TabLink>
+                <TabLink to="metadata" default>
+                  <i className="fa fa-info-circle"></i>
+                </TabLink>
               </li>
               <li>
-                <TabLink to="connections">Connections&nbsp;({this.props.numberOfReferences})</TabLink>
+                <TabLink to="connections">
+                  <i className="fa fa-sitemap"></i>
+                  <span className="connectionsNumber">{this.props.numberOfReferences}</span>
+                </TabLink>
               </li>
             </ul>
           </Tabs>