moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style language switcher

Browse Source
This commit is contained in:
moanos [he/him] 2024-07-31 18:48:23 +02:00
parent 527c5b180f
commit ac2715f5f4
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/assets/css/style.css
View File

@ -199,15 +199,31 @@ input.measurement {
flex-wrap: wrap; flex-wrap: wrap;
} }
.navigation-sticky { .top-navigation {
margin: 0;
border: none;
width: 100%;
display: flex;
}
.homebutton {
background-color: var(--secondary-light-one);
color: var(--primary-light-one);
border-bottom-right-radius: 8px;
font-weight: bold;
padding: 16px;
width: 20%;
}
.language-switcher {
background-color: var(--secondary-light-one); background-color: var(--secondary-light-one);
color: var(--primary-light-one); color: var(--primary-light-one);
padding: 16px; padding: 16px;
margin: 0; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border: none; border: none;
font-weight: bold; font-weight: bold;
width: 20%; width: 20%;
margin-left: auto;
} }

35
public/index.html
View File

@ -11,17 +11,21 @@
</head> </head>
<body> <body>
<div class="navigation-sticky"> <div class="top-navigation">
<a href="https://notfellchen.org"> <div class="homebutton">
<b data-i18n-key="back-to-home">zurück zur Homepage</b> <a href="https://notfellchen.org">
</a> <b data-i18n-key="back-to-home">zurück zur Homepage</b>
</div> </a>
</div>
<img src="img/translation-icon@2x.png" class="translation-icon" / >
<select data-i18n-switcher class="locale-switcher"> <div class="language-switcher">
<option value="en">English</option> <select data-i18n-switcher class="locale-switcher">
<option value="de">Deutsch</option> <option value="en">English</option>
</select> <option value="de">Deutsch</option>
</select>
</div>
</div>
<div class="content"> <div class="content">
<h1 data-i18n-key="app-name">Käfigrechner</h1> <h1 data-i18n-key="app-name">Käfigrechner</h1>
@ -89,7 +93,16 @@
<div class="input-element"> <div class="input-element">
<label for="numFullFloors" data-i18n-key="full-floors">Vollebenen</label> <label for="numFullFloors" data-i18n-key="full-floors">Vollebenen</label>
<div class="tooltip"> <div class="tooltip">
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor"><path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg> <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
stroke="currentColor">
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="tooltiptext" data-i18n-key="full-floors-tooltip">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span> <span class="tooltiptext" data-i18n-key="full-floors-tooltip">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span>
</div> </div>
<div class="ncontainer"> <div class="ncontainer">