Skip to content

Commit 00b5cd0

Browse files
berkelmasberkelmas
committed
scss-watch, scss watched implemented
1 parent f55bd70 commit 00b5cd0

File tree

9 files changed

+2978
-1
lines changed

9 files changed

+2978
-1
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,5 @@ chore-*.tar
2424

2525
# Temporary files, for example, from tests.
2626
/tmp/
27+
28+
node_modules

‎assets/package-lock.json

+2,725
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "assets",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"webpack": "webpack",
8+
"delete-mainjs": "rm -rf ../dist/priv/dist/main.js",
9+
"watch-scss": "nodemon --watch ./ --ext scss --ignore dist --exec \"npm run webpack && rm -rf ../priv/css/main.js\""
10+
},
11+
"keywords": [],
12+
"author": "",
13+
"license": "ISC",
14+
"devDependencies": {
15+
"css-loader": "^6.3.0",
16+
"mini-css-extract-plugin": "^2.4.1",
17+
"nodemon": "^2.0.13",
18+
"optimize-css-assets-webpack-plugin": "^6.0.1",
19+
"sass": "^1.42.1",
20+
"sass-loader": "^12.1.0",
21+
"style-loader": "^3.3.0",
22+
"webpack": "^5.57.1",
23+
"webpack-cli": "^4.8.0"
24+
}
25+
}

‎assets/src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import "./scss/index.scss";
2+
3+
export default {};

‎assets/src/scss/button.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
button {
2+
background: transparent;
3+
box-shadow: 0px 0px 0px transparent;
4+
border: 0px solid transparent;
5+
text-shadow: 0px 0px 0px transparent;
6+
}
7+
8+
button:hover {
9+
background: transparent;
10+
box-shadow: 0px 0px 0px transparent;
11+
border: 0px solid transparent;
12+
text-shadow: 0px 0px 0px transparent;
13+
}
14+
15+
button:active {
16+
outline: none;
17+
border: none;
18+
}
19+
20+
button:focus {
21+
outline: 0;
22+
}

‎assets/src/scss/index.scss

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
@import "button";
2+
3+
.chore-container {
4+
width: 100%;
5+
height: 100%;
6+
padding-left: 2em;
7+
padding-right: 2em;
8+
}
9+
10+
.running-chores {
11+
list-style-type: none;
12+
background-color: white;
13+
border-bottom-left-radius: 0.5em;
14+
border-bottom-right-radius: 0.5em;
15+
padding: 0.25em;
16+
padding-top: 0.5em;
17+
box-shadow: 1px 2px rgba(128, 128, 128, 0.432) inset;
18+
height: 40em;
19+
overflow-y: scroll;
20+
margin-top: 0;
21+
}
22+
23+
.chore-menu {
24+
background-color: blue;
25+
width: 100%;
26+
min-height: 10em;
27+
margin-top: 0.25em;
28+
border-top-left-radius: 0.5em;
29+
border-top-right-radius: 0.5em;
30+
}
31+
32+
.chore-form-flexbox {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: space-between;
36+
min-height: 5em;
37+
padding: 1em;
38+
}
39+
40+
.chore-form-select {
41+
height: 2em;
42+
margin-bottom: 1em;
43+
}
44+
45+
.chore-form-flexbox {
46+
display: flex;
47+
flex-direction: column;
48+
}
49+
50+
.chore-form-inputs-flexbox {
51+
text-align: left;
52+
display: flex;
53+
flex-direction: row;
54+
flex-wrap: wrap;
55+
justify-content: space-between;
56+
}
57+
58+
.chore-form-file-input-wrapper {
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
62+
align-items: stretch;
63+
}
64+
65+
.chore-form-top-level-input-wrapper {
66+
width: 32%;
67+
min-height: 3em;
68+
}
69+
70+
.chore-form-input-errors-wrapper {
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: center;
74+
align-items: center;
75+
}
76+
77+
.chore-form-input-wrapper {
78+
padding-left: 0.25em;
79+
padding-right: 0.25em;
80+
display: flex;
81+
justify-content: space-between;
82+
align-items: center;
83+
}
84+
85+
.chore-form-label {
86+
color: white;
87+
}
88+
89+
.chore-form-file-input {
90+
color: white;
91+
}
92+
93+
.chore-run-submit-button {
94+
color: white;
95+
border: 1px solid white;
96+
border-radius: 1em;
97+
padding-left: 0.5em;
98+
padding-right: 0.5em;
99+
padding-top: 0.25em;
100+
padding-bottom: 0.25em;
101+
align-self: flex-end;
102+
}
103+
104+
.chore-run-submit-button:hover {
105+
border: 2px solid white;
106+
margin-top: -1px;
107+
margin-right: -1px;
108+
}
109+
110+
.chore-run-submit-button:active {
111+
color: blue;
112+
background-color: white;
113+
border: 2px solid white;
114+
margin-top: -1px;
115+
margin-right: -1px;
116+
}
117+
118+
.chore-item {
119+
margin-bottom: 0.1em;
120+
width: 100%;
121+
min-height: 5em;
122+
border-radius: 1em;
123+
background-color: white;
124+
padding-left: 2em;
125+
padding-right: 2em;
126+
font-size: 100%;
127+
font-weight: bold;
128+
border: 1px solid rgba(233, 233, 233, 0.432);
129+
box-shadow: 2px 2px rgba(128, 128, 128, 0.432);
130+
display: flex;
131+
flex-direction: row;
132+
align-items: center;
133+
justify-content: space-between;
134+
}
135+
136+
.chore-item-recentlog {
137+
font-family: Courier New, monospace;
138+
padding-left: 0.5em;
139+
padding-right: 0.5em;
140+
height: 4em;
141+
width: 20em;
142+
overflow-wrap: normal;
143+
background-color: black;
144+
color: white;
145+
box-shadow: 1px 2px rgba(128, 128, 128, 0.432) inset;
146+
text-align: left;
147+
}
148+
149+
.chore-item-stats {
150+
width: 5em;
151+
display: flex;
152+
flex-wrap: nowrap;
153+
flex-direction: row;
154+
justify-content: space-between;
155+
}
156+
157+
.chore-item-stats > div {
158+
width: 2em;
159+
text-align: center;
160+
display: flex;
161+
flex-direction: row;
162+
align-items: center;
163+
}

‎assets/webpack.config.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const path = require("path");
2+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
4+
module.exports = {
5+
mode: "production",
6+
entry: path.resolve(__dirname, "./src/index.js"),
7+
output: {
8+
path: path.resolve(__dirname, "../priv/css"),
9+
filename: "[name].js",
10+
publicPath: "/dist/",
11+
},
12+
plugins: [
13+
new MiniCssExtractPlugin({
14+
filename: "[name].css",
15+
chunkFilename: "[id].css",
16+
}),
17+
],
18+
module: {
19+
rules: [
20+
{
21+
test: /\.scss$/,
22+
use: [
23+
"style-loader",
24+
MiniCssExtractPlugin.loader,
25+
{
26+
loader: "css-loader",
27+
},
28+
{
29+
loader: "sass-loader",
30+
},
31+
],
32+
},
33+
],
34+
},
35+
};

‎lib/chore_runner_ui/chore_view.ex

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
defmodule ChoreRunnerUI.ChoreView do
22
use ChoreRunnerUI, :view
33
alias ChoreRunnerUI.Components.ChoreItemComponent
4-
@styles File.read!(Application.app_dir(:chore_runner, "priv/css/chore.css"))
4+
@styles File.read!(Application.app_dir(:chore_runner, "priv/css/main.css"))
55

66
defp styles, do: @styles
7+
# defp styles, do: File.read!(Application.app_dir(:chore_runner, "priv/css/main.css"))
78

89
defp first_log([{ts, log} | _]) do
910
"[#{ts}] #{log}"

‎priv/css/main.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)