Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Browse page, UI redesign, Websockets, Navigation, and more!

Browse Source
This commit is contained in:
scarlett kadan 2024-03-26 23:28:43 -04:00
parent 667ade0185
commit 435894ba25
7 changed files with 371 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/assets/stylesheets/app.scss
View File

@ -1,20 +1,43 @@
@font-face {
font-family: "Gotham Bold";
src: url("../fonts/goth_bold.ttf") format("truetype");
}
@font-face {
font-family: "Gotham Book";
src: url("../fonts/goth_book.ttf") format("truetype");
}
@font-face {
font-family: "Gotham Light";
src: url("../fonts/goth_light.ttf") format("truetype");
}
@font-face {
font-family: "Gotham Medium";
src: url("../fonts/goth_medium.ttf") format("truetype");
}
@font-face {
font-family: "Gotham Condensed Medium";
src: url("../fonts/goth_cond_medium.otf") format("opentype");
}
* {
margin: 0px;
padding: 0px;
background-image: linear-gradient(#004990, #002554);
margin: 0;
padding: 0;
background-color: white;
width: 100vw;
height: 100vh;
overflow: hidden;
overflow: hidden; /* Safari */ /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.container {
background-image: none;
margin: 20px;
padding: 0px;
width: calc(100% - 40px);
height: calc(100% - 40px);
outline: solid white 1px;
border-radius: 20px;
background-color: blue;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}

105
src/assets/stylesheets/browse.scss Normal file
View File

@ -0,0 +1,105 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.browse {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
display: block;
justify-content: center;
align-items: center;
}
.browse-image {
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.browse-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.browse-fieldContainer {
width: 100%;
min-height: calc(100% - 200px);
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
}
.browse-cable {
width: 80%;
height: 100px;
background: $white;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
border-radius: 20px;
border: 1px solid $gray;
padding: 25px;
margin-bottom: 10px;
}
.browse-cable-image {
width: auto;
height: 100%;
background-color: transparent;
margin-right: 10px;
}
.browse-cable-label {
width: 90%;
height: auto;
}
.browse-cable-arrow {
width: auto;
height: auto;
font-size: 45px;
font-family: "Gotham Light";
transform:scaleY(2);
color: $gray;
}
.browse-cable-name, .browse-cable-brand, .browse-cable-description, .browse-cable-short {
background-color: transparent;
font-size: 20px;
color: $medium-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
}
.browse-cable-name {
padding-bottom: 10px;
}
.browse-cable-brand, .browse-cable-description, .browse-cable-short {
color: $black;
font-size: 16px;
}

7
src/assets/stylesheets/home.scss
View File

@ -1,7 +0,0 @@
.home {
background-image: none;
background-color: white;
border-radius: 20px;
width: 80%;
height: 100%;
}

43
src/assets/stylesheets/map.scss Normal file
View File

@ -0,0 +1,43 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.map {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
);
background-color: transparent;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: visible;
}
.map-image {
width: auto;
height: 250px;
background: transparent;
}
.map-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}

136
src/assets/stylesheets/navbar.scss
View File

@ -1,61 +1,133 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.navbar {
background-image: none;
width: 20%;
width: 300px;
height: 100%;
display: flex;
position: relative;
border-radius: 20px;
flex-direction: column;
outline: white solid 1px;
border-radius: 20px;
align-items: center;
border-right: $gray solid 1px;
}
.navbar-top {
background-image: none;
width: 100%;
height: 14%;
padding: 5px;
width: 90%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
align-items: left;
justify-content: flex-start;
flex-direction: column;
background-color: transparent;
}
.navbar-top-logo {
background-image: none;
height: 120px;
width: auto;
aspect-ratio: 2333/1003;
.navbar-top-hamburger {
width: 45px;
height: 45px;
font-size: 40px;
font-family: "Gotham Medium";
display: flex;
align-items: center;
justify-content: left;
padding-left: 4px;
text-align: center;
margin-top: 20px;
margin-bottom: 15px;
color: $light-blue;
background-color: transparent;
border-radius: 20px;
}
.navbar-top h1 {
width: auto;
height: auto;
font-size: 32px;
font-family: "Gotham Medium";
color: $dark-blue;
background-color: transparent;
margin-bottom: 10px;
margin-left: 3px;
transition: all 0.3s ease-in-out;
}
.navbar-top h1:hover {
color: $light-blue;
}
.navbar-search {
width: 100%;
height: auto;
display: flex;
border-radius: 15px;
padding: 0;
margin: 0;
}
.navbar-search input {
width: 80%;
height: auto;
padding: 10px;
border-radius: 15px 0 0 15px;
background-color: $white;
outline: none;
box-shadow: none;
font-size: 16px;
font-family: "Gotham Medium";
color: $dark-blue;
border: solid $light-blue 2px;
border-right: none;
}
.navbar-search button {
width: 20%;
height: auto;
border-radius: 0 15px 15px 0;
background-color: $white;
outline: none;
box-shadow: none;
font-size: 16px;
font-family: "Gotham Medium";
border: solid $light-blue 2px;
cursor: pointer;
}
.navbar-list {
background-image: none;
margin-top: 20px;
width: 100%;
height: 100%;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
margin: 0px;
padding: 0px;
}
.navbar-list-item {
background-image: none;
width: 90%;
height: 10%;
margin: 20px 0px 20px 0px;
background-color: rgb(255, 255, 255);
border-radius: 20px;
width: 100%;
height: 50px;
margin: 0 0 3px;
background-color: $white;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
justify-content: left;
text-decoration: none;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
.navbar-list-item-label {
background-image: none;
.navbar-list-item:hover {
background-color: $hover-blue;
}
.navbar-list-item span {
background-color: transparent;
width: auto;
height: auto;
font-size: 18px;
font-family: "Gotham Medium";
color: $dark-blue;
margin-left: 10px;
}

43
src/assets/stylesheets/settings.scss Normal file
View File

@ -0,0 +1,43 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.settings {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
);
background-color: transparent;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: visible;
}
.settings-image {
width: auto;
height: 250px;
background: transparent;
}
.settings-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}

43
src/assets/stylesheets/summary.scss Normal file
View File

@ -0,0 +1,43 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.summary {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
);
background-color: transparent;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: visible;
}
.summary-image {
width: auto;
height: 250px;
background: transparent;
}
.summary-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}