Skip to content

Commit

Permalink
new styles for the home menu abr
Browse files Browse the repository at this point in the history
dropdown login stats

user profile in navbar

navbar component; home component

home page new layout

Game details page created (#56)

User profile page (#43)

new styles for the home menu abrs

user profile in navbar

navbar component; home component

home page new layout

home page

shared navbar

new dropdown menu

trash

update of home css

working logic

style update

lock json
  • Loading branch information
Jakub-prog committed May 27, 2024
1 parent 5dd6c2b commit 60789b8
Show file tree
Hide file tree
Showing 20 changed files with 1,060 additions and 212 deletions.
70 changes: 28 additions & 42 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 18 additions & 35 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,43 +1,26 @@
import './App.scss'
import User from "./User/User";
import {Link} from "react-router-dom";
import UserButtons from './User/UserButtons';
import './App.scss';
import Navbar from './Navbar';
import Home from './Home';
import { useState } from 'react';

function App() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);


const toggleUserBar = () => {
setIsCollapsed(!isCollapsed);
};

return (
<div className="app">
<UserButtons/>

<Navbar isAuthenticated={isAuthenticated} user={null} />
{/* tutaj przesyla uzytkownika */}

<div className="title">
<h1>Bot-Wars</h1>
<div className="login-btns">
<User isLoggedIn={false}/>
</div>
</div>
<div className="menu-btns">
<div className="menu-btn">
<Link to="index.html">
<button className="btn">Home</button>
</Link>
</div>
<div className="menu-btn">
<Link to="tournaments/home">
<button className="btn">Tournaments</button>
</Link>
</div>
<div className="menu-btn">
<Link to="games">
<button className="btn">Games</button>
</Link>
</div>
<div className="menu-btn">
<Link to="about">
<button className="btn">About</button>
</Link>
</div>
</div>
<Home isAuthenticated={isAuthenticated} />
</div>
)
);
}

export default App
export default App;
162 changes: 128 additions & 34 deletions src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,52 +4,146 @@
-webkit-box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #000;
color: #0f0;
}

.app {
text-align: center;

h1:hover {
cursor: default;
}
.log-head {
display: flex;
flex-flow: column;
align-items: left;

.title {
overflow: auto;
padding: 10px;
}
.header {
z-index: 600;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(0, 0, 0, 0.8);
width: 100%;

.login-btns {
float: right;
}
.logo {
flex-basis: 60%;
display: flex;
justify-content: left;
letter-spacing: 5px;
}

.btn {
display: inline-block;
width: 100%;
}
.logo h1 {
margin: 0;
font-size: 1.5em;
color: #0f0;
}
}

.menu-btn {
margin: 3px;
width: 23%
}
.menu-btns.admin .menu-btn{
width: 32%
}
.flex-user {
z-index: 300;
max-width: 50%;
display: flex;
flex-direction: row;
align-items: left;
background-color: #000;
opacity: 0.85;
border: 3px solid #24da00;
// margin-top: -60px;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(0);

&.collapsed {
transform: translateY(-100%);
opacity: 0;
}

.menu-btns {
margin-top: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.user-bar {
border: none;

.user-buttons-container {
display: flex;
justify-content: flex-end;

a {
display: flex;
align-items: center;
}

.user-button {
width: 65px;
height: 65px;
padding: 6px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #24da00;
text-align: center;
}

.setting-button {
padding: 0;
}
}
}
}

.hide-arrow {
position: relative;
z-index: 200;
top: -10px;
margin: 0;
padding-top: 10px;
background-color: #0f0;
color: #000;
width: 100px;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transform: translateY(0);

@media only screen and (max-width: 650px) {
.menu-btn {
width: 100%
&.collapsed {
transform: translateY(-100px);
opacity: 0;
}
}
.menu-btns.admin .menu-btn{
width: 100%

.collapsed-bar {
position: relative;
margin-top: -108px;
background: #0f0;
color: #000;
min-width: 150px;
height: 60;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 10px;
cursor: pointer;
font-size: 22px;

.username {
margin-left: 10px;
}
}
}

.login-btn {
width: 100%;
.container {
display: flex;
width: 70%;
opacity: 85%;
height: 100%;
margin: auto;
background-color: #161616;
// border-left: 3px dashed #0BE400;
// border-right: 3px dashed #0BE400;
}
}
Loading

0 comments on commit 60789b8

Please sign in to comment.