Merge pull request #226 from CRICDatabase/newHeaderAndFooter

Add new header and new footer
CRICDatabase · Oct 22, 2021 · 16e6de3 · 16e6de3
2 parents 1f5d392 + cf8026e
commit 16e6de3
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 59 deletions.
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
@@ -1,60 +1,60 @@
 <footer>
     <div class="container-fluid">
-        <div class="row">
-            <div class="col-sm-6 col-md-4 col-lg-4">
-                <a class="nav-link-footer nav-link navbar-brand"
-                        [routerLink]="['/']">
-                    <img class="img-responsive logoIndexFooter"
-                            src="./assets/img/logo/cric_horizontal_white.png"
-                            alt="Logotipo - Center for Recognition and Inspection of Cells">
-                </a>
-            </div>
-            <div class="col-sm-3 col-md-4 col-lg-4">
-                <p class="university"> <a class="nav-link-footer"
-                            [href]="linkUFOP"
-                            target="_blank"> Federal University of Ouro Preto (UFOP) </a> </p>
-            </div>
-
-            <div class="col-sm-3 col-md-4 col-lg-4">
-                <p> <a class="nav-link-footer"
-                            [routerLink]="['/about']"> About us </a> </p>
-                <p> <a class="nav-link-footer"
-                            [routerLink]="['/about']"
-                            fragment="cite-us"> Cite us </a> </p>
+        <div class="row justify-content-end">
+            <div class="col-sm-3 order-sm-4 col-md-2 col-lg-1 order-lg-1   order-4">
+                <p> <a class="nav-link-footer" [routerLink]="['/about']"> About us </a> </p>
+                <p> <a class="nav-link-footer" [routerLink]="['/about']" fragment="cite-us"> Cite us </a> </p>
                 <p>
-                    <a class="nav-link-footer"
-                            [routerLink]="['/privacy']">
+                    <a class="nav-link-footer" [routerLink]="['/privacy']">
                         Privacy Policy
                     </a>
                 </p>
+            </div>
+            <div class="col-sm-3 order-sm-6 col-md-3 col-lg-2 order-lg-2 order-5 order-md-5">
                 <p>
-                    <a class="nav-link-footer"
-                            [routerLink]="['/terms']">
+                    <a class="nav-link-footer" [routerLink]="['/terms']">
                         Terms & Conditions
                     </a>
                 </p>
-                <p> <a class="nav-link-footer"
-                            href="mailto:{{contact_us_email}}"> Contact us </a> </p>
+                <p> <a class="nav-link-footer" href="mailto:{{contact_us_email}}"> Contact us </a> </p>
             </div>
 
-        </div>
+            <div class="col-lg-5 order-sm-9 description order-10">
+                <p>
+                    CRIC Searchable Image Database is released under
+                    the <a href="http://www.fsf.org/licensing/licenses/agpl-3.0.html">AGPL</a>.
+                    <a href="https://github.com/CRICDatabase/searchable-image-database">Source code</a> available.
+                    Except where otherwise noted,
+                    content on this site is licensed under
+                    a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0
+                        International license</a>.
+                </p>
+                <p>
+                    ©2020 Federal University of Ouro Preto (UFOP)
+                    on behalf of
+                    the Center for Recognition and Inspection of Cells.
+                </p>
+                <p class="university"> <a class="nav-link-footer" [href]="linkUFOP" target="_blank"> Federal University
+                        of Ouro Preto (UFOP) </a> </p>
+
+            </div>
+            <div class="col order-sm-1 col-lg-2  order-lg-10 order-1">
+                <a class="nav-link-footer nav-link navbar-brand" [routerLink]="['/']">
+                    <img class="img-responsive logoIndexFooter" src="./assets/img/logo/cric_horizontal_color.png"
+                        alt="Logotipo - Center for Recognition and Inspection of Cells">
+                </a>
+            </div>
+
+            <div class="col order-sm-2 col-lg-2 order-lg-12 order-2">
+                <a class="nav-link-footer nav-link navbar-brand" href="https://ufop.br/">
+                    <img class="img-responsive image-ufop" src="./assets/img/logo/ufop.png"
+                        alt="Logotipo - Federal University of Ouro Preto (UFOP) ">
+                </a>
+            </div>
 
-        <div class="row">
-            <p>
-                CRIC Searchable Image Database is released under
-                the <a href="http://www.fsf.org/licensing/licenses/agpl-3.0.html">AGPL</a>.
-                <a href="https://github.com/CRICDatabase/searchable-image-database">Source code</a> available.
-            </p>
-            <p>
-                Except where otherwise noted,
-                content on this site is licensed under
-                a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International license</a>.
-            </p>
-            <p>
-                ©2020 Federal University of Ouro Preto (UFOP)
-                on behalf of
-                the Center for Recognition and Inspection of Cells.
-            </p>
         </div>
+
+
+
     </div>
-</footer>
+</footer>
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
@@ -1,6 +1,6 @@
 footer {
     margin-top: 1vh;
-    color: #fafafa;
+    color: #7d7d7d;
 
     p{
         color: inherit;
@@ -16,15 +16,80 @@ footer {
 
     img.logoIndexFooter{
         width: 250px;
-        margin-left: 2vw;
+    }
+
+    img.image-ufop{
+        width: 68px;
+    }
+
+    .container-fluid{
+        padding: 40px;
+    }
+
+    .container-fluid .university{
+        text-align: center;
+        padding-top: 20px;
+    }
+
+    .container-fluid .description{
+        margin-top: 20px;
+    }
+}
+
+@media (min-width: 100px) { 
+
+    img.logoIndexFooter{
+        padding-top: 4vh;
+        max-width: 150px;
+        margin-left: -50px;
+    }
+
+    img.image-ufop{
+        max-width: 48px;
+        margin-left: 30px;
+    }
+}
+
+@media (min-width: 281px) { 
+
+    img.logoIndexFooter{
+        padding-top: 4vh;
+        max-width: 150px;
+        margin-left: -20px;
+    }
+
+    img.image-ufop{
+        max-width: 48px;
+        margin-left: 30px;
+    }
+}
+
+@media (min-width: 377px) { 
+
+    img.logoIndexFooter{
+        padding-top: 4vh;
+        max-width: 180px;
+        margin-left: 10px;
+    }
+
+    img.image-ufop{
+        max-width: 58px;
+        margin-left: 40px;
     }
 }
 
 /* Small devices (landscape phones, 576px and up)*/
 @media (min-width: 576px) { 
 
     img.logoIndexFooter{
-        padding-top: 5vh;
+        padding-top: 3vh;
+        max-width: 160px;
+        margin-left: -20px;
+    }
+
+    img.image-ufop{
+        max-width: 58px;
+        margin-left: 20px;
     }
 }
 
@@ -33,6 +98,12 @@ footer {
 
     img.logoIndexFooter{
         padding-top: 2vh;
+        max-width: 180px;
+    }
+
+    img.image-ufop{
+        max-width: 58px;
+        margin-left: -20px;
     }
 }
 
@@ -41,7 +112,12 @@ footer {
 
     img.logoIndexFooter{
         padding-top: 2vh;
-        max-width: 200px;
+        max-width: 180px;
+    }
+
+    img.image-ufop{
+        max-width: 58px;
+        margin-left: 30px;
     }
 }
 
@@ -50,13 +126,22 @@ footer {
 
     img.logoIndexFooter{
         padding-top: 2vh;
-        max-width: 200px;
+        max-width: 180px;
+    }
+
+    img.image-ufop{
+        max-width: 58px;
     }
 }
 
 @media (min-width: 1400px) {
 
     img.logoIndexFooter{
         padding-top: 2vh;
+        max-width: 200px;
     }
-}
+
+    img.image-ufop{
+        max-width: 68px;
+    }
+}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -4,7 +4,7 @@
         <a class="nav-link navbar-brand"
                 [routerLink]="['']">
             <img class="img-responsive logoIndexHeader"
-                    src="./assets/img/logo/cric_horizontal_color.png"
+                    src="./assets/img/logo/cric_horizontal_white.png"
                     alt="Logotipo - CRIC Center for Recognition and Inspection of Cells">
         </a>
 

diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
@@ -22,6 +22,8 @@ img.logoIndexHeader{
     display: none;
 }
 
+
+
 .navbar-toggler{
     height: 40px;
     width: 54px;
@@ -31,13 +33,17 @@ img.logoIndexHeader{
     justify-content: flex-end;
 }
 
+.navbar-light .navbar-nav .nav-link {
+    color: white;
+}
+
 .navbar-light .navbar-nav .nav-link:hover {
-    color: #2f9fae;
+    color: #196974;
     font-weight: 600;
 }
 
 .navbar-light .navbar-nav .nav-link:focus{
-    color: #2f9fae !important;
+    color: #196974 !important;
     font-weight: 600;
 }
 

diff --git a/src/assets/img/logo/ufop.png b/src/assets/img/logo/ufop.png
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -10,16 +10,16 @@ body{
 
 header{
     position: relative;
-    background-color: $background-white;
+    background-color: $cric-blue;
     top: 0px;
-    box-shadow: 5px 0px 4px $background-shadow;
+    box-shadow: 5px 0px 4px $cric-blue;
 }
 
 footer{
     padding: 0.75rem 1.25rem 0.75rem 1.25rem;
     position: relative;
-    background-color: $cric-blue;
-    box-shadow: 0px 0px 5px $cric-blue;
+    background-color: $background-white;
+    box-shadow: 0px 0px 5px $background-shadow;
 }
 
 ul{
@@ -174,4 +174,4 @@ img{
     body{
         font-size: 1.25rem;
     }
-}
+}