Skip to content

Commit 9e27a69

Browse files
dpetuncomputable
dpet
authored and
uncomputable
committed
Styling update
Font awesome icons added Errors styled Made responsize for mobile
1 parent 2bec22e commit 9e27a69

35 files changed

+52563
-43
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,6 @@ target/
1818

1919
# Generated by trunk
2020
dist/
21+
22+
# Mac
23+
.DS_Store

‎index.html

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77

88
<link data-trunk rel="sass" href="src/assets/style/style.scss" />
99
<link data-trunk rel="copy-dir" href="src/assets/images" />
10+
<link data-trunk rel="copy-dir" href="src/assets/font-awesome" />
11+
12+
<link href="font-awesome/css/all.min.css" rel="stylesheet">
1013
</head>
1114
<body></body>
1215

‎src/assets/font-awesome/css/all.min.css

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

‎src/assets/font-awesome/webfonts/fa-brands-400.eot

134 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-brands-400.svg

+3,717
Loading

‎src/assets/font-awesome/webfonts/fa-brands-400.ttf

133 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-brands-400.woff

90 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-brands-400.woff2

76.6 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-duotone-900.eot

554 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-duotone-900.svg

+15,319
Loading

‎src/assets/font-awesome/webfonts/fa-duotone-900.ttf

554 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-duotone-900.woff

259 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-duotone-900.woff2

183 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-light-300.eot

482 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-light-300.svg

+12,420
Loading

‎src/assets/font-awesome/webfonts/fa-light-300.ttf

482 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-light-300.woff

246 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-light-300.woff2

185 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-regular-400.eot

444 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-regular-400.svg

+11,318
Loading

‎src/assets/font-awesome/webfonts/fa-regular-400.ttf

443 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-regular-400.woff

225 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-regular-400.woff2

170 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-solid-900.eot

379 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-solid-900.svg

+9,647
Loading

‎src/assets/font-awesome/webfonts/fa-solid-900.ttf

378 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-solid-900.woff

184 KB
Binary file not shown.

‎src/assets/font-awesome/webfonts/fa-solid-900.woff2

138 KB
Binary file not shown.

‎src/assets/js/d3_load.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
export function update_d3() {
3+
console.log('updating')
4+
}

‎src/assets/style/style.scss

+82-26
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ p {
4848
position: relative;
4949

5050
.program-input-intro {
51-
margin-right: 200px;
51+
margin-right: 220px;
5252
}
5353

5454
h2 {
@@ -60,6 +60,22 @@ p {
6060
}
6161
}
6262

63+
@media only screen and (max-width: 600px) {
64+
&-header{
65+
display: flex;
66+
flex-direction: column;
67+
68+
.example-program-select{
69+
position: relative !important;
70+
margin-top: 20px;
71+
}
72+
}
73+
74+
.program-input-intro {
75+
margin-right: 0 !important;
76+
}
77+
78+
}
6379

6480
&-footer {
6581
min-height: 50px;
@@ -77,6 +93,20 @@ p {
7793
color: $text-grey;
7894
}
7995
}
96+
97+
@media only screen and (max-width: 600px) {
98+
display: flex;
99+
flex-direction: column;
100+
101+
.program-details {
102+
margin-right: 0;
103+
}
104+
105+
.run-button{
106+
position: relative !important;
107+
margin-top: 20px;
108+
}
109+
}
80110
}
81111

82112
.run-button {
@@ -93,22 +123,34 @@ p {
93123
}
94124
}
95125

96-
.example-program-select {
97-
height: 40px;
98-
padding-left: 10px;
99-
color: $text-grey;
100-
background-color: $background-dark;
101-
width: 200px;
102-
border: 1px solid #363636;
126+
.example-program-select-container{
103127
position: absolute;
104128
bottom: 0;
105129
right: 0;
106130

107-
-webkit-appearance: none;
108-
-moz-appearance: none;
131+
.example-program-select {
132+
height: 40px;
133+
padding-left: 10px;
134+
color: $text-grey;
135+
background-color: $background-dark;
136+
width: 200px;
137+
border: 1px solid #363636;
138+
139+
-webkit-appearance: none;
140+
-moz-appearance: none;
109141

110-
&:focus-visible {
111-
outline: none;
142+
&:focus-visible {
143+
outline: none;
144+
}
145+
}
146+
147+
i {
148+
position: absolute;
149+
right: 12px;
150+
top: 8px;
151+
font-weight: 100;
152+
font-size: 26px;
153+
color: $text-white;
112154
}
113155
}
114156

@@ -127,6 +169,34 @@ p {
127169
}
128170
}
129171

172+
.program-status{
173+
border: 1px dotted #00ff00;
174+
color: #00ff00;
175+
padding: 8px 20px;
176+
font-size: 13px;
177+
margin-bottom: 8px;
178+
display: flex;
179+
align-items: center;
180+
181+
&.is_error{
182+
border: 1px dotted #ff0000;
183+
color: #ff0000;
184+
}
185+
186+
i {
187+
font-size: 20px;
188+
margin-right: 10px;
189+
}
190+
}
191+
192+
.parsing-error-box {
193+
color: white;
194+
padding: 10px;
195+
background-color: #770000;
196+
font-weight: 200;
197+
margin-bottom: 10px;
198+
}
199+
130200
// analysis
131201
.analysis {
132202
margin-top: 40px;
@@ -137,20 +207,6 @@ p {
137207
.analysis-title {
138208
margin: 6px 0 14px 0;
139209
}
140-
.program-status{
141-
border: 1px dotted #00ff00;
142-
color: #00ff00;
143-
padding: 14px;
144-
font-size: 12px;
145-
min-width: 200px;
146-
margin-bottom: 8px;
147-
text-align: center;
148-
149-
&.is_error{
150-
border: 1px dotted #ff0000;
151-
color: #ff0000;
152-
}
153-
}
154210
}
155211

156212
.analysis-body {

‎src/components/analysis.rs

+2
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,13 @@ fn RunResult(run_result: Result<String, String>) -> impl IntoView {
7575
match run_result {
7676
Ok(success) => view! {
7777
<div class="program-status" class:is_error=false >
78+
<i class="fal fa-check-circle"></i>
7879
{success}
7980
</div>
8081
},
8182
Err(error) => view! {
8283
<div class="program-status" class:is_error=true >
84+
<i class="fal fa-times-circle"></i>
8385
{error}
8486
</div>
8587
},

‎src/components/app.rs

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
use leptos::*;
2+
use wasm_bindgen::prelude::wasm_bindgen;
23

34
use super::analysis::Analysis;
45
use super::examples::{ExampleProgramDescription, SelectExampleProgram};
56
use super::merkle::Merkle;
7+
use super::parser::ParseError;
68

79
use crate::function::Runner;
810
use crate::util;
@@ -14,7 +16,7 @@ pub fn App() -> impl IntoView {
1416
let (name, set_name) = create_signal::<Option<String>>(None);
1517

1618
let program = Signal::derive(move || util::program_from_string(&program_str.get()));
17-
let parse_error = move || program.get().err();
19+
let parse_error = Signal::derive(move || program.get().err());
1820

1921
let update_program_str = move |s: String| {
2022
set_program_str.set(s);
@@ -33,10 +35,17 @@ pub fn App() -> impl IntoView {
3335
}
3436
};
3537

38+
// load js functions
39+
#[wasm_bindgen(module = "/src/assets/js/d3_load.js")]
40+
extern "C" {
41+
fn update_d3();
42+
}
43+
update_d3();
44+
3645
view! {
3746
<div class="input-page">
3847
<div class="page-header">
39-
<img class="header-icon" src="https://design.blockstream.com/assets/pages/simplicity/simplicity_logo_white_on_transparent_rgb.svg" />
48+
<img class="header-icon" src="/images/simplicity_logo.svg" />
4049
</div>
4150

4251
<div class="container center">
@@ -55,9 +64,7 @@ pub fn App() -> impl IntoView {
5564
</div>
5665

5766
<div class="container">
58-
<pre>
59-
{parse_error}
60-
</pre>
67+
<ParseError maybe_error=parse_error/>
6168

6269
<div class="program-input">
6370
<div class="program-input-header">

‎src/components/examples.rs

+14-12
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,20 @@ where
2222
select_example_program("BIP 340 Schnorr".to_string());
2323

2424
view! {
25-
<select
26-
class="example-program-select"
27-
on:input=move |event| select_example_program(event_target_value(&event))
28-
>
29-
<option value="" disabled selected>Example programs</option>
30-
{
31-
examples::get_names()
32-
.map(|name| view! { <option value={name}>{name}</option>})
33-
.collect::<Vec<_>>()
34-
}
35-
<i class="fa-solid fa-user"></i>
36-
</select>
25+
<div class="example-program-select-container">
26+
<select
27+
class="example-program-select"
28+
on:input=move |event| select_example_program(event_target_value(&event))
29+
>
30+
<option value="" disabled selected>Example programs</option>
31+
{
32+
examples::get_names()
33+
.map(|name| view! { <option value={name}>{name}</option>})
34+
.collect::<Vec<_>>()
35+
}
36+
</select>
37+
<i class="fas fa-angle-down"></i>
38+
</div>
3739
}
3840
}
3941

‎src/components/mod.rs

+1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ mod analysis;
22
mod app;
33
mod examples;
44
mod merkle;
5+
mod parser;
56

67
pub use app::App;

‎src/components/parser.rs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
use leptos::*;
2+
3+
#[component]
4+
pub fn ParseError(maybe_error: Signal<Option<String>>) -> impl IntoView {
5+
view! {
6+
{
7+
move || maybe_error.get().map(|error| view! {
8+
<div class="parsing-error-box">
9+
<pre>
10+
{error}
11+
</pre>
12+
</div>
13+
})
14+
}
15+
}
16+
}

0 commit comments

Comments
 (0)