Bhasher/focus
Bhasher
/
focus
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

Improve header's responsive design

This commit is contained in:
Brieuc Dubois 2024-01-17 20:37:31 +01:00
parent 3f95e2811a
commit f5896509da
4 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/lib/components/project/Column.svelte
View File

@ -150,6 +150,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 1.5rem;
input {
background-color: #444;
@ -186,8 +187,8 @@
cursor: pointer;
border-radius: 4px;
height: 40px;
font-size: 2rem;
display: flex;
font-size: 2rem;
justify-content: center;
align-items: center;
margin-top: 10px;

11
frontend/src/lib/components/project/Header.svelte
View File

@ -105,6 +105,8 @@
</header>
<style lang="less">
@import '../../styles/breakpoints.less';
header {
margin: 0 2%;
padding: 20px 0;
@ -116,13 +118,21 @@
}
h2 {
flex-grow: 100000;
font-size: 3rem;
.nosidebar({
padding-left: 50px;
});
}
nav {
display: flex;
flex-grow: 1;
flex-shrink: 0;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 7px;
button {
@ -133,6 +143,7 @@
border: none;
background-color: transparent;
font-size: 1.5rem;
flex-shrink: 0;
&.defined {
color: #6481cc;

4
frontend/src/lib/components/project/Sidebar.svelte
View File

@ -146,8 +146,8 @@
.toggle {
visibility: hidden;
position: fixed;
top: 5px;
left: 5px;
top: 18px;
left: 10px;
border-radius: 50%;
width: 50px;
height: 50px;

2
frontend/src/lib/styles/breakpoints.less
View File

@ -1,4 +1,4 @@
@one-column: 480px;
@one-column: 520px;
.one-column(@rules) {
@media (max-width: @one-column) {