contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring: overhaul of the visual style with CSS

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-11 02:17:41 +02:00
parent a1f5032232
commit 7f1e8d3f9c
37 changed files with 1280 additions and 741 deletions
Download patch file Download diff file Expand all files Collapse all files

90
UI/StylesheetTestGui.svelte
View file

@ -1,6 +1,9 @@
<script lang="ts">
import Svg from "../Svg";
import Loading from "./Base/Loading.svelte";
import ToSvelte from "./Base/ToSvelte.svelte";
</script>
<div>
@ -11,11 +14,14 @@
<div class="normal-background">
<h2>Normal background</h2>
There are a few styles, such as the <span class="literal-code">normal-background</span>-style which is used if there is
There are a few styles, such as the <span class="literal-code">normal-background</span>-style which is used if
there is
nothing special going on. Some general information, with at most <a href="https://example.com" target="_blank">a
link to someplace</a>.
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
<ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")}/>
<Loading>Loading...</Loading>
</div>
<div class="low-interaction flex flex-col">
@ -24,35 +30,91 @@
There are <span class="literal-code">low-interaction</span> areas, where some buttons might appear.
</p>
<button class="btn">Main action</button>
<button class="btn-secondary">Secondary action</button>
<button class="btn-disabled">Disabled</button>
<div class="flex">
<button>
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Main action
</button>
<button class="disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Main action (disabled)
</button>
</div>
<div class="flex">
<button class="secondary">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Secondary action
</button>
<button class="secondary disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Secondary action (disabled)
</button>
</div>
<input type="text">
<div>
<input id="html" name="fav_language" type="radio" value="HTML">
<label for="html">HTML</label><br>
<input id="css" name="fav_language" type="radio" value="CSS">
<label for="css">CSS</label><br>
<input id="javascript" name="fav_language" type="radio" value="JavaScript">
<label for="javascript">JavaScript</label>
<label for="html" class="checked">
<input id="html" name="fav_language" type="radio" value="HTML">
HTML (mimicks a <span class="literal-code">checked</span>-element)</label>
<label for="css">
<input id="css" name="fav_language" type="radio" value="CSS">
CSS</label>
<label for="javascript">
<input id="javascript" name="fav_language" type="radio" value="JavaScript">
<ToSvelte construct={Svg.community_svg().SetClass("w-8 h-8")}/>
JavaScript</label>
</div>
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
<ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")}/>
<Loading>Loading...</Loading>
</div>
<div class="interactive flex flex-col">
<h2>Interactive area</h2>
<p>
There are <span class="literal-code">interactive</span> areas, where some buttons might appear.
There are <span class="literal-code">interactive</span> areas, where many buttons and input elements
will appear.
</p>
<button class="btn">Main action</button>
<button class="btn-secondary">Secondary action</button>
<button class="btn-disabled">Disabled</button>
<div class="flex">
<button>
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Main action
</button>
<button class="disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Main action (disabled)
</button>
</div>
<div class="flex">
<button class="secondary">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Secondary action
</button>
<button class="secondary disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
Secondary action (disabled)
</button>
</div>
<span class="alert">Alert: something went wrong</span>
<span class="thanks">Thank you! Operation successful</span>
<ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")}/>
<Loading>Loading...</Loading>
<div>
<label for="html0">
<input id="html0" name="fav_language" type="radio" value="HTML">
HTML</label>
<label for="css0">
<input id="css0" name="fav_language" type="radio" value="CSS">
CSS</label>
<label for="javascript0">
<input id="javascript0" name="fav_language" type="radio" value="JavaScript">
JavaScript
</label>
</div>
</div>
</div>