Skip to content

Commit

Permalink
[#69794] frontend: Improve UI style (margins/colors/font)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaciejWas
MaciejWas committed Dec 12, 2024
1 parent 3c3a88e commit 97b2647
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 23 deletions.
6 changes: 4 additions & 2 deletions frontend/src/assets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@import './progress-bar.css';
@import './toast.css';

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,600;1,14..32,600&display=swap');

:root {
Expand Down Expand Up @@ -57,7 +57,9 @@ html,
body {
min-height: 100%;
background-color: var(--background-100);
font-family: 'Noto Sans';
* {
font-family: 'Mona Sans';
}
font-weight: 400;
}
body {
Expand Down
15 changes: 14 additions & 1 deletion frontend/src/assets/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,23 @@
overflow-x: auto;
}

.resources-table-wrapper.checked {
pointer-events: none;

tbody tr:nth-child(even) {
background-color: var(--background-100);
}

tbody tr:nth-child(odd) {
background-color: var(--background-200);
}
}

.resources-table {
border: 2px solid var(--gray-400);
border-radius: 5px;
padding: 0.5em;
padding: 12px;
background-color: var(--background-200);

border-collapse: separate;
border-spacing: 0;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/TitleBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ with a title, subtitle and an optional action button.
& > #titlebar {
display: flex;
flex-direction: column;
font-family: 'Mona Sans', sans-serif;

& > #title {
color: var(--gray-1000);
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 3em;
}

& > #subtitle {
color: var(--gray-900);
font-family: 'Inter', sans-serif;
font-size: 1.1em;
font-size: 1.3em;
}
}

Expand Down
8 changes: 7 additions & 1 deletion frontend/src/components/devices/DevicesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Component wraps functionality for displaying and working with rdfm devices.
<div id="device-list">
<div id="device-list-overview">
<p>Overview</p>
<div class="resources-table-wrapper">
<div class="resources-table-wrapper checked">
<table class="resources-table">
<tbody>
<tr class="resources-table-row no-border">
Expand Down Expand Up @@ -186,9 +186,15 @@ Component wraps functionality for displaying and working with rdfm devices.
flex-direction: column;
gap: 1em;
width: 20%;
margin-right: 20px;

& > a {
color: inherit;
text-decoration: none;
padding: 10px;
&:hover {
background-color: var(--background-200);
}
}
}

Expand Down
38 changes: 26 additions & 12 deletions frontend/src/components/groups/GroupsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ Component wraps functionality for displaying and working with rdfm groups.

<div class="container">
<p>Overview</p>
<div class="resources-table-wrapper">
<div class="resources-table-wrapper checked">
<table class="resources-table">
<tbody>
<tr class="resources-table-row">
Expand Down Expand Up @@ -209,8 +209,10 @@ Component wraps functionality for displaying and working with rdfm groups.
</div>
<div class="group-row single-item">
<div class="entry">
<div class="title" v-if="group.packages.length == 1">1 Package</div>
<div class="title" v-else>{{ group.packages.length }} Packages</div>
<div class="title" v-if="group.packages.length == 1">Package</div>
<div class="title" v-else>
Packages <span class="count">{{ group.packages.length }}</span>
</div>
<div class="values">
<div v-for="pckg in group.packages" :key="pckg" class="item">
<div class="item-layout">
Expand All @@ -235,8 +237,10 @@ Component wraps functionality for displaying and working with rdfm groups.
</div>
<div class="group-row single-item">
<div class="entry">
<div class="title" v-if="group.devices.length == 1">1 Device</div>
<div class="title" v-else>{{ group.devices.length }} Devices</div>
<div class="title" v-if="group.devices.length == 1">Device</div>
<div class="title" v-else>
Devices <span class="count">{{ group.devices.length }}</span>
</div>
<div class="values">
<div
v-for="device in group.devices.map((d) => ({
Expand Down Expand Up @@ -289,13 +293,16 @@ Component wraps functionality for displaying and working with rdfm groups.

.container {
padding: 2em;
padding-top: 0em;

& > p {
color: var(--gray-1000);
font-size: 1.5em;
}

.group {
background: var(--background-200);

display: flex;
flex-direction: column;

Expand All @@ -308,6 +315,7 @@ Component wraps functionality for displaying and working with rdfm groups.
display: grid;
grid-template-columns: 60px repeat(5, auto) 220px;
border-bottom: 2px solid var(--gray-400);
padding: 12px;

&:last-child {
border: none;
Expand All @@ -324,7 +332,6 @@ Component wraps functionality for displaying and working with rdfm groups.

.entry {
display: block !important;
width: 100%;
}

.button-wrapper {
Expand All @@ -341,18 +348,29 @@ Component wraps functionality for displaying and working with rdfm groups.
& > .title {
color: var(--gray-900);
text-wrap: nowrap;

.count {
margin-left: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 30px;
color: white;
background-color: var(--gray-100);
}
}

& > .value {
color: var(--gray-1000);
}

& > .values {
margin-top: 10px;

& > .item {
border: 1px solid var(--gray-400);
border-radius: 5px;
background-color: var(--gray-100);
margin: 0.25em 1em;
margin: 0.25em;
padding: 0.25em 0.5em;
display: inline-block;

Expand All @@ -362,7 +380,6 @@ Component wraps functionality for displaying and working with rdfm groups.
}

.item-layout {
font-family: monospace;
font-size: large;
margin-left: 2px;

Expand All @@ -375,6 +392,7 @@ Component wraps functionality for displaying and working with rdfm groups.
height: 1.25em;
margin: 0px;
text-align: left;
font-family: monospace;
}

p:nth-child(2) {
Expand All @@ -384,10 +402,6 @@ Component wraps functionality for displaying and working with rdfm groups.
}
}

&:last-child {
flex-grow: 1;
}

& > .button-wrapper {
display: flex;
justify-content: flex-end;
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/components/packages/PackagesList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ Component wraps functionality for displaying and working with rdfm packages.

<div class="container">
<p>Overview</p>
<div class="resources-table-wrapper">
<div class="resources-table-wrapper checked">
<table class="resources-table">
<tbody>
<tr class="resources-table-row">
Expand Down Expand Up @@ -157,6 +157,7 @@ Component wraps functionality for displaying and working with rdfm packages.
<style scoped>
.container {
padding: 2em;
padding-top: 0em;

& > p {
color: var(--gray-1000);
Expand Down
11 changes: 8 additions & 3 deletions frontend/src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ SPDX-License-Identifier: Apache-2.0
}

#main {
background-color: var(--background-200);
background-color: var(--background-100);
min-height: 100vh;

.menu {
Expand Down Expand Up @@ -142,12 +142,14 @@ SPDX-License-Identifier: Apache-2.0
display: flex;
justify-content: left;
gap: 0.5em;
padding: 0 3em;
background-color: var(--background-200);
padding: 0 1.8em;

> .navbar-item {
color: var(--gray-800);
cursor: pointer;
padding: 0.5em;
font-size: larger;

&.active {
color: var(--gray-1000);
Expand All @@ -163,13 +165,16 @@ SPDX-License-Identifier: Apache-2.0
& > #logobar {
color: white;
padding: 2em;
padding-bottom: 0em;
background-color: var(--background-200);

display: flex;
justify-content: space-between;
align-items: center;

& > #logo {
height: 3em;
height: 4em;
width: 10em;
}

& > #settings {
Expand Down

0 comments on commit 97b2647

Please sign in to comment.