Skip to content
Snippets Groups Projects
Commit 8f629f19 authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

changes navbar to our design

parent 13654b47
No related branches found
No related tags found
2 merge requests!4React branch,!3React branch
Hide whitespace changes
Inline Side-by-side
Showing
with 254 additions and 54 deletions
.env 0 → 100644
+ 3
− 0
View file @ 8f629f19
VITE_TEAM_ID=5247
VITE_TEAM_NAME=Bielefeld-CeBiTec
VITE_TEAM_YEAR=2024
index.html
+ 1
− 1
View file @ 8f629f19
......@@ -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" />
......
src/components/Header.tsx
+ 3
− 2
View file @ 8f629f19
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>
......
src/components/Navbar.tsx
+ 3
− 2
View file @ 8f629f19
......@@ -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}>
......
src/components/Villagebuttons.tsx
+ 7
− 4
View file @ 8f629f19
......@@ -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>
)
}
......
src/components/heading-one.tsx 0 → 100644
+ 15
− 0
View file @ 8f629f19
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
src/components/seclarations.d.ts
+ 2
− 1
View file @ 8f629f19
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
src/containers/App/App.css
+ 197
− 41
View file @ 8f629f19
/* * * * * * * */
/* * 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
src/containers/App/App.tsx
+ 22
− 2
View file @ 8f629f19
......@@ -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 */}
</>
}
/>
......
src/contents/home.tsx
+ 1
− 1
View file @ 8f629f19
......@@ -9,7 +9,7 @@ export function Home() {
<h2>Wiki under construction!</h2>
<hr />
</div>
<Villbuttonrow></Villbuttonrow>
</div>
<div className="row">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment