Skip to content

Commit 4ea16e1

Browse files
LucaffoLucaffo
committed
Split button style in his stylesheet, button displayed correctly on right
1 parent e642dfa commit 4ea16e1

6 files changed

Lines changed: 71 additions & 74 deletions

File tree

‎.github/workflows/deploy.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,11 @@ jobs:
5252
mkdir -p site/static/favicons
5353
mkdir -p site/styles
5454
mkdir -p site/fonts
55+
mkdir -p site/scripts
5556
cp dart/web/index.html site/
5657
cp dart/web/main.js site/
5758
cp dart/web/wallpaper_generator_worker.js site/
59+
cp -r dart/web/scripts/. site/scripts/
5860
cp -r dart/web/styles/. site/styles
5961
cp -r dart/web/fonts/. site/fonts
6062
cp -r static/favicons/. site/static/favicons

‎dart/.gitignore‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,4 @@
22
# Created by `dart pub`
33
.dart_tool/
44
*.deps
5-
main.js
6-
main.js.map
7-
web/main.js
8-
web/main.js.map
9-
*.js
5+
web/*.js

‎dart/web/index.html‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,35 @@
77
<meta http-equiv="X-UA-Compatible" content="IE=edge">
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99
<link rel="icon" type="image/x-icon" href="/github-wallpapers/static/favicons/favicon.ico">
10-
<link rel="stylesheet" href="styles/styles.css">
10+
<link rel="stylesheet" href="styles/buttons.css">
1111
<link rel="stylesheet" href="styles/loader.css">
12+
<link rel="stylesheet" href="styles/styles.css">
1213
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
1314
</head>
1415

1516
<body>
1617

17-
<div class="home-button-container">
18+
<!--Buttons-->
19+
<div class="button-container">
1820
<a class="button" href="https://github.com/Lucaffo/github-wallpapers">
1921
<i class="fa fa-github"></i>
2022
</a>
2123
<a class="button" href="https://github.com/Lucaffo/github-wallpapers/blob/main/docs/documentation.md">
2224
<i class="fa fa-book"></i>
2325
</a>
24-
</div>
25-
26-
<div class="save-button-container">
2726
<button class="button" id="save-btn">Save</button>
2827
</div>
2928

29+
<!--Main app container-->
3030
<div class="container">
31+
32+
<!--Editor-->
3133
<div class="codemirror-container" id="input"></div>
34+
35+
<!--Handle-->
3236
<div class="handle" id="resize-handle"></div>
37+
38+
<!--Canvas-->
3339
<div class="canvas-container">
3440
<div id="loading-panel" class="loading-panel">
3541
<div class="loader"></div>
@@ -38,30 +44,9 @@
3844
<canvas id="output" width="1920" height="1080"></canvas>
3945
</div>
4046
</div>
41-
<script>
42-
const handle = document.getElementById("resize-handle");
43-
const textarea = document.getElementById("input");
44-
const canvasContainer = document.querySelector(".canvas-container");
45-
const canvas = document.getElementById("output");
46-
47-
let isResizing = false;
48-
49-
handle.addEventListener("mousedown", (e) => {
50-
isResizing = true;
51-
document.addEventListener("mousemove", onMouseMove);
52-
document.addEventListener("mouseup", () => {
53-
isResizing = false;
54-
document.removeEventListener("mousemove", onMouseMove);
55-
});
56-
});
57-
58-
function onMouseMove(e) {
59-
if (!isResizing) return;
60-
let newWidth = e.clientX;
61-
textarea.style.flex = `0 0 ${newWidth}px`;
62-
canvasContainer.style.flex = `1`;
63-
}
64-
</script>
47+
48+
<!--Resize containers script-->
49+
<script src="scripts/handleContainerResize.js"></script>
6550

6651
<!--Startup Code Mirror 5-->
6752
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">

‎dart/web/scripts/handleContainerResize.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const handle = document.getElementById("resize-handle");
2+
const textarea = document.getElementById("input");
3+
const canvasContainer = document.querySelector(".canvas-container");
4+
const canvas = document.getElementById("output");
5+
6+
let isResizing = false;
7+
8+
handle.addEventListener("mousedown", (e) => {
9+
isResizing = true;
10+
document.addEventListener("mousemove", onMouseMove);
11+
document.addEventListener("mouseup", () => {
12+
isResizing = false;
13+
document.removeEventListener("mousemove", onMouseMove);
14+
});
15+
});
16+
17+
function onMouseMove(e) {
18+
if (!isResizing) return;
19+
let newWidth = e.clientX;
20+
textarea.style.flex = `0 0 ${newWidth}px`;
21+
canvasContainer.style.flex = `1`;
22+
}

‎dart/web/styles/buttons.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.button-container {
2+
z-index: 1;
3+
position: absolute;
4+
top: 8px;
5+
right: 8px;
6+
display: flex;
7+
gap: 10px;
8+
}
9+
10+
.button {
11+
position: relative;
12+
background-color: #007bff;
13+
color: white;
14+
border: none;
15+
border-radius: 5px;
16+
font-size: 16px;
17+
cursor: pointer;
18+
transition: background 0.3s;
19+
padding: 10px 20px;
20+
}
21+
22+
.button i {
23+
font-size: 20px;
24+
color: white;
25+
}
26+
27+
.button:hover {
28+
background-color: #0056b3;
29+
transform: translateY(-2px);
30+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
31+
}

‎dart/web/styles/styles.css‎

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ body {
3232
}
3333

3434
.CodeMirror-vscrollbar {
35-
display: none;
35+
display: none !important;
3636
}
3737

3838
.handle {
@@ -60,42 +60,3 @@ body {
6060
width: auto;
6161
height: auto;
6262
}
63-
64-
.home-button-container {
65-
display: flex;
66-
position: relative;
67-
gap: 10px;
68-
padding: 8px;
69-
background-color: #333;
70-
}
71-
72-
.save-button-container {
73-
position: absolute;
74-
top: 8px;
75-
right: 8px;
76-
display: flex;
77-
gap: 10px;
78-
}
79-
80-
.button {
81-
position: relative;
82-
background-color: #007bff;
83-
color: white;
84-
border: none;
85-
border-radius: 5px;
86-
font-size: 16px;
87-
cursor: pointer;
88-
transition: background 0.3s;
89-
padding: 10px 20px;
90-
}
91-
92-
.button i {
93-
font-size: 20px;
94-
color: white;
95-
}
96-
97-
.button:hover {
98-
background-color: #0056b3;
99-
transform: translateY(-2px);
100-
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
101-
}

0 commit comments

Comments
 (0)