From 8f629f1920b52d8a78f40da302d759f92de8b2ea Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Wed, 26 Jun 2024 10:56:57 +0200
Subject: [PATCH] changes navbar to our design
---
.env | 3 +
index.html | 2 +-
src/components/Header.tsx | 5 +-
src/components/Navbar.tsx | 5 +-
src/components/Villagebuttons.tsx | 11 +-
src/components/heading-one.tsx | 15 ++
src/components/seclarations.d.ts | 3 +-
src/containers/App/App.css | 238 +++++++++++++++++++++++++-----
src/containers/App/App.tsx | 24 ++-
src/contents/home.tsx | 2 +-
10 files changed, 254 insertions(+), 54 deletions(-)
create mode 100644 .env
create mode 100644 src/components/heading-one.tsx
diff --git a/.env b/.env
new file mode 100644
index 00000000..f7ad5ca2
--- /dev/null
+++ b/.env
@@ -0,0 +1,3 @@
+VITE_TEAM_ID=5247
+VITE_TEAM_NAME=Bielefeld-CeBiTec
+VITE_TEAM_YEAR=2024
diff --git a/index.html b/index.html
index defce8ec..dedf50dd 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link
rel="shortcut icon"
- href="https://static.igem.wiki/common/icons/favicons/igem-2022.svg"
+ href="https://static.igem.wiki/teams/5247/logos-team/precyse-logo-stand-mai.png"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ae557276..53b356f0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import { H1 } from '../components/heading-one.tsx';
interface HeaderProps {
title: string;
lead: string;
@@ -9,8 +10,8 @@ export function Header({ title, lead }: HeaderProps) {
<div className="container h-100">
<div className="row h-100 align-items-center">
<div className="col-lg-12">
- <h1 className="display-4 mt-5 mb-2">{title}</h1>
- <p className="lead mb-5 text-white-50">{lead}</p>
+ <H1 text={title}></H1>
+ <p className="lead mb-5">{lead}</p>
</div>
</div>
</div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d890f097..d554cb4e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -30,6 +30,7 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
<NavDropdown
key={`page-${pageIndex}`}
title={item.name}
+ renderMenuOnMount={true}
id="basic-nav-dropdown"
>
{folderItems}
@@ -45,12 +46,12 @@ export function Navbar(/* {isLightMode, setIsLightMode}:any */) {
});
return (
- <BootstrapNavbar className="navbar-custom" expand="lg" bg="l" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"} */fixed="top">
+ <BootstrapNavbar className="navbar-custom" expand="lg" bg="bg-transparent" variant="light"/* bg={isLightMode ? "d" : "l"} variant={isLightMode ? "dark" : "light"} */fixed="top">
<Container>
<BootstrapNavbar.Brand>
{import.meta.env.VITE_TEAM_NAME}
</BootstrapNavbar.Brand>
- <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" />
+ <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav"/>
<BootstrapNavbar.Collapse id="basic-navbar-nav">
<Nav className="left-aligned">
{/* <button id="theme-toggle" className="btn btn-outline-secondary ml-auto" onClick={handleToggle}>
diff --git a/src/components/Villagebuttons.tsx b/src/components/Villagebuttons.tsx
index 01866f2e..1133d06f 100644
--- a/src/components/Villagebuttons.tsx
+++ b/src/components/Villagebuttons.tsx
@@ -13,10 +13,13 @@ export function Villbuttonrow(){
return(
<div className="row align-items-center bottom-buttons">
<Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
- <Villagebutton page="/human-practices" source="https://static.igem.wiki/teams/5247/design/icons/humanpractices.png" title="Human Practice"></Villagebutton>
+ <Villagebutton page="/team" source="https://static.igem.wiki/teams/5247/design/icons/team.png" title="Team"></Villagebutton>
+ <Villagebutton page="/experiments" source="https://static.igem.wiki/teams/5247/design/icons/lab.png" title="Experiments"></Villagebutton>
+ <Villagebutton page="/description" source="https://static.igem.wiki/teams/5247/design/icons/dna.png" title="Description"></Villagebutton>
+ <Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
+ <Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
+ <Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
+
</div>
)
}
diff --git a/src/components/heading-one.tsx b/src/components/heading-one.tsx
new file mode 100644
index 00000000..e6bd6017
--- /dev/null
+++ b/src/components/heading-one.tsx
@@ -0,0 +1,15 @@
+
+
+export function H1({text}:{text: string}){
+ return(
+ <div className="row">
+ <svg width="100%" height="100%">
+ <text x="0%" y="60%">
+ {text}
+ </text>
+ </svg>
+ </div>
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/seclarations.d.ts b/src/components/seclarations.d.ts
index d1d259b6..3e858c3c 100644
--- a/src/components/seclarations.d.ts
+++ b/src/components/seclarations.d.ts
@@ -1,2 +1,3 @@
export * from './comps';
-export * from './Villagebuttons.tsx';
\ No newline at end of file
+export * from './Villagebuttons.tsx';
+export * from './headind-one.tsx';
\ No newline at end of file
diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 2dcb78d1..02aa27d8 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -1,3 +1,6 @@
+/* * * * * * * */
+/* * COLOURS * */
+/* * * * * * * */
:root {
/* our colours*/
--text-primary: #850F78;
@@ -17,37 +20,84 @@
--igemmediumgreen: #019968;
--igemlightgreen: #99cb9a;
}
-
+/* * * * * * * */
+/* * * BODY* * */
+/* * * * * * * */
body {
padding-top: 56px;
background-color: var(--background);
color: #493843;
}
-
body.dark-mode {
background-color: var(--offblack);
color: white;
}
+/* * * * * * * */
+/* * GENERAL * */
+/* * * * * * * */
+.left-aligned {margin-left: auto;}
+.align-items-center{align-items:center!important}
+.zweirem{padding: 2rem;}
+.left{float: left;}
+.right{float: right;}
+
+/* * * * * * * */
+/* * NAVBAR * */
+/* * * * * * * */
.nav-link{
- color: white !important;
+ color: var(--text-primary) !important;
+}
+.nav-link:hover {
+ color: white !important;
+ background-color: var(--text-primary) !important;
+ border-radius: 7px;
+}
+.navbar{
+ backdrop-filter: blur(5px);
+ transition: visibility 0s, 0.6s, opacity 0.6s linear, transform 1s;
+}
+ nav.navbar {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+.dropdown-item{
+ color: var(--text-primary) !important;
+}
+.dropdown-item:hover{
+ color: white !important;
+ background-color: var(--text-primary) !important;
+}
+.nav-item.dropdown:hover .dropdown-menu {
+ display: block;
+ background-color: white;
+ border-color: var(--text-primary);
+ border-radius: 7px;
+}
+.navbar-brand{
+ color: var(--text-primary) !important;
}
+
+
+/* * * * * * * */
+/* BACKGROUND */
+/* * * * * * * */
.bg-d{
background-color: var(--text-primary) !important;
-
}
.bg-l{
background-color: var(--text-primary) !important;
color: white;
}
-
-.left-aligned {
- margin-left: auto;
+.bg-transp{
+ background:transparent;
+ color: var(--text-primary);
}
-
-/* CALLOUT */
+/* * * * * * * */
+/* * CALLOUT * */
+/* * * * * * * */
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
@@ -85,7 +135,9 @@ body.dark-mode {
border-left-color: #d9534f;
}
-/* footer */
+/* * * * * * * */
+/* * FOOTER * */
+/* * * * * * * */
footer{
background-color: var(--background);
}
@@ -94,20 +146,51 @@ footer a {
font-weight: bold;
text-decoration: none;
}
-
footer a:hover {
color: white;
text-decoration: underline;
}
-.zweirem{
- padding: 2rem;
+
+/* * * * * * * * */
+/*VILLAGE BUTTONS*/
+/* * * * * * * * */
+.bottom-buttons{
+ margin-top: 50px;
+ margin-bottom: 20px;
+ padding-left: 30px;
}
-.left{
- float: left;
+.village-style-button{
+ box-shadow: 5px 5px 15px gray !important;
+ border-radius: 2rem !important;
+ padding: 0 !important;
+ max-width: 12% !important;
+ aspect-ratio: 2 / 3 !important;
+ margin-left: 1vw;
}
-.right{
- float: right;
+.village-style-button:hover{
+ box-shadow: 5px 5px 15px black !important;
+}
+.village-style-button h3{
+ text-align: center !important;
+ font-size: 10px;
+ font-weight: bold;
+ color: #000;
+}
+.village-style-button img{
+ max-width: 70% !important;
+ max-height: 70% !important;
+ padding-top: 20px !important;
+}
+
+/* * * * * * * * * */
+/* * * IMAGES * * */
+/* * * * * * * * * */
+img,
+picture,
+svg {
+ max-width: 100%;
+ display: block;
}
img .middle{
vertical-align:middle;
@@ -122,35 +205,108 @@ img .middle{
max-height: 150px;
}
-
-.bottom-buttons{
- margin-top: 50px;
- margin-bottom: 20px;
- padding-left: 30px;
+/* * * * * * * */
+/* * * SVG * * */
+/* * * * * * * */
+svg{
+ background:transparent
+}
+svg text{
+ font-size: 7vw !important;
+ stroke-width:2px !important;
+ fill:var(--accent-primary) ;
+ stroke:var(--text-primary);
+ /*letter-spacing:4px;*/
+ animation:effect 3s, dash 3s;
+}
+svg text:hover{
+ fill: var(--text-primary)
}
-.village-style-button{
- box-shadow: 5px 5px 15px gray;
- border-radius: 2rem;
- padding: 0 !important;
- max-width: 12% !important;
- aspect-ratio: 2 / 3;
- margin-left: 1vw;
+
+
+
+/* * * * * * * */
+/* MEDIA RULES */
+/* * * * * * * */
+/*For tablet or bigger*/
+@media screen and (min-width: 992px) {
+ /* navbar opens on hover*/
+ .dropdown:hover .dropdown-menu {
+ display: block;
+ }
}
-.village-style-button:hover{
- box-shadow: 5px 5px 15px black;
+/*For Tablet and smaller*/
+@media screen and (max-width: 992px){
+
}
-.village-style-button h3{
- text-align: center !important;
- font-size: 10px;
- font-weight: bold;
- color: #000;
+/*For Smartphones*/
+@media screen and (max-width: 768px){
+ svg text{
+ font-size: 9vw;
+ stroke-width:1px;
+ }
+ .village-style-button h3{
+ display: none !important;
+ }
+ .village-style-button{
+ box-shadow: 1px 1px 1px gray;
+ border-radius: 10px;
+ border-color: black;
+ }
+ .village-style-button:hover{
+ box-shadow: none;
+ }
+ .village-style-button img{
+ max-width: 90%;
+ max-height: 90%;
+ padding-top: 10px;
+ padding-bottom: 5px;
+ }
}
+/*Bigger than smartphones*/
+@media only screen and (min-width: 768px) {
+ .col-1 {width: 8.33%;}
+ .col-2 {width: 16.66%;}
+ .col-3 {width: 25%;}
+ .col-4 {width: 33.33%;}
+ .col-5 {width: 41.66%;}
+ .col-6 {width: 50%;}
+ .col-7 {width: 58.33%;}
+ .col-8 {width: 66.66%;}
+ .col-9 {width: 75%;}
+ .col-10 {width: 83.33%;}
+ .col-11 {width: 91.66%;}
+ .col-12 {width: 100%;}
-.village-style-button img{
- max-width: 70%;
- max-height: 70%;
- padding-top: 20px;
+
}
-.align-items-center{align-items:center!important}
\ No newline at end of file
+
+/* * * * * * * */
+/* * EFFECTS * */
+/* * * * * * * */
+@keyframes effect{
+ 0%{
+ stroke-dasharray:0 70%;
+ }
+ 100%{
+ stroke-dasharray:10% 0%;
+ stroke-dashoffset:20%;
+ }
+}
+@keyframes dash {
+ 0% {
+ stroke-dashoffset: 1300;
+ }
+ 35% {
+ fill-opacity: 0;
+ }
+ 50% {
+ stroke-dashoffset: 0;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ fill-opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index d2302fc2..ee6d0929 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -4,6 +4,7 @@ import { Route, Routes } from "react-router-dom";
import { Footer, Header, Navbar, NotFound } from "../../components";
import { getPathMapping, stringToSlug } from "../../utils";
import { useEffect, useState } from "react";
+import Villbuttonrow from '../../components/Villagebuttons.tsx';
const App = () => {
/* // Dark Mode toggle
@@ -41,9 +42,28 @@ const App = () => {
element={
<>
<Header title={title || ""} lead={lead || ""} />
- <div className="container">
- <Component />
+ {/* Page content */}
+ <div className="container-fluid">
+ <div className="row ">
+ <div className="col-2 d-none d-lg-block">
+ <div className="sticky-top" /* style="top: 80px; overflow-wrap: break-word;" */>
+
+ </div>
+ </div>
+ <div className="col">
+ <Component />
+ <Villbuttonrow/>
+ </div>
+ <div className="col-1 d-none d-lg-block" >
+ {/* <!-- empty so far --> */}
+
+ </div>
+ </div>
</div>
+
+ {/* End page content */}
+
+
</>
}
/>
diff --git a/src/contents/home.tsx b/src/contents/home.tsx
index 73ae5627..692b05df 100644
--- a/src/contents/home.tsx
+++ b/src/contents/home.tsx
@@ -9,7 +9,7 @@ export function Home() {
<h2>Wiki under construction!</h2>
<hr />
</div>
- <Villbuttonrow></Villbuttonrow>
+
</div>
<div className="row">
--
GitLab