Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding multi-island support #278

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding multi-island support #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08f6ab2
Adding multi-island support
DevSplash Apr 26, 2020
e0c96dc
Update styles.css
DevSplash Apr 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
174 changes: 160 additions & 14 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,42 +210,58 @@ input {
margin: 8px 0px;
}

input[type=number]:placeholder-shown {
input[type=number]:placeholder-shown,
input[type=text]:placeholder-shown {
background: #f3f3f3;
}

input[type=number]:not(:placeholder-shown) {
input[type=number]:not(:placeholder-shown),
input[type=text]:not(:placeholder-shown) {
background: transparent;
color: #0AB5CD;
}

input[type=number]:placeholder-shown:hover {
input[type=number]:placeholder-shown:hover,
input[type=text]:placeholder-shown:hover {
cursor: pointer;
transform: scale(1.1);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
}

input[type=number]:focus {
input[type=number]:focus,
input[type=text]:focus {
outline: none;
transform: scale(1.1);
background: white;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 3px 6px rgba(0, 0, 0, 0.09);
}

input[type=number]:focus::placeholder {
input[type=number]:focus::placeholder,
input[type=text]:focus::placeholder {
opacity: 0;
}

input[type=number] {
width: 60px;
text-align: center;
}

input[type=number]:disabled {
input[type=text] {
width: 150px;
}

input[type=number]:disabled,
input[type=text]:disabled {
background: inherit;
}
input[type=number]:disabled,
input[type=text]:disabled,
input[type=radio]:disabled+label,
.button.button--reset:disabled {
cursor: not-allowed !important;
}

input[type=number]:disabled:hover {
input[type=number]:disabled:hover,
input[type=text]:disabled:hover {
box-shadow: none;
transform: none;
cursor: default;
Expand All @@ -257,8 +273,10 @@ input::-webkit-inner-spin-button {
margin: 0;
}

input[type=number] {
input[type=number],
input[type=text] {
-moz-appearance: textfield;
text-align: center;
}

.input__radio-buttons {
Expand Down Expand Up @@ -555,7 +573,8 @@ input[type=number] {
}

/*Darkmodjs*/
.darkmode-layer, .darkmode-toggle {
.darkmode-layer,
.darkmode-toggle {
z-index: 1;
}

Expand Down Expand Up @@ -597,8 +616,7 @@ body.darkmode--activated{

body.darkmode--activated div[class^="dialog-box"],
body.darkmode--activated div[class^="nook-phone"],
body.darkmode--activated form[class^="input__form"],
{
body.darkmode--activated form[class^="input__form"] {
background: #fee0c4;
color: #010F1D;
}
Expand All @@ -609,13 +627,15 @@ body.darkmode--activated svg[class^="waves"]{

body.darkmode--activated a,
body.darkmode--activated b,
body.darkmode--activated input[type=number]:not(:placeholder-shown){
body.darkmode--activated input[type=number]:not(:placeholder-shown),
body.darkmode--activated input[type=text]:not(:placeholder-shown) {
color: #586472;

}

body.darkmode--activated input[type="radio"]+label,
body.darkmode--activated input[type=number]:placeholder-shown{
body.darkmode--activated input[type=number]:placeholder-shown,
body.darkmode--activated input[type=text]:placeholder-shown {
background: #bda284;
}

Expand All @@ -626,3 +646,129 @@ body.darkmode--activated input[type="radio"]:checked+label{
body.darkmode--activated i{
color: #7b6955;
}

.island-menu {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
position: fixed;
right: 32px;
bottom: 85px;
z-index: 1;
user-select: none;
}

.island-toggle {
display: flex;
opacity: 0.7;
border-radius: 50%;
}

.island-toggle,
.island-selector {
background-color: #bcdada;
z-index: 1;
width: 3rem;
height: 3rem;
border: none;
left: unset;
cursor: pointer;
transition: all 0.5s ease;
justify-content: center;
align-items: center;
}

.island-group {
display: flex;
align-items: flex-end;
flex-direction: column-reverse;
height: auto;
}

.island-group .island-selector {
width: 12rem;
height: 2rem;
line-height: 2rem;
position: relative;
margin-bottom: 8px;
padding: 5px;
border-radius: 5px;
font-weight: bold;
font-size: 1.25rem;
color: #768bc5;
text-align: center;
opacity: 0.7;
}

.island-group .island-selector.island-selected {
background-color: #f7d379;
}

.island-group .island-selector-add {
position: relative;
margin-bottom: 8px;
background-color: #92e4ef;
z-index: 1;
width: 3rem;
height: 3rem;
border: none;
left: unset;
cursor: pointer;
transition: all 0.5s ease;
justify-content: center;
align-items: center;
display: inherit;
opacity: 0.7;
border-radius: 50%;
}

.island-group .island-selector-add.shared-data {
background-color: #76e472
}

.island-toggle:hover {
opacity: 0.9;
}

.island-group .island-selector:hover {
background-color: #bce6ff;
}

.island-group .island-selector.island-selected:hover {
background-color: #ffe299;
}

.island-group .island-selector:active {
background-color: #74cafc;
}

.island-group .island-selector.island-selected:active {
background-color: #ffc42d;
}

.island-group .island-selector-add:hover {
background-color: #a0f2fd;
}

.island-group .island-selector-add:active {
background-color: #65e9fa;
}

.island-group .island-selector-add.shared-data:hover {
background-color: #98ff94
}

.island-group .island-selector-add.shared-data:active {
background-color: #5af155
}

.island-toggle:active {
transition: opacity 0s;
opacity: 1;
}

.island-toggle:focus,
.island-selector:focus,
.island-selector-add:focus {
outline: none;
}
17 changes: 14 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,10 @@


<body>

<div class="island-menu">
<div class="island-toggle">🏝️</div>
<div class="island-group" style="display:none"></div>
</div>
<div class="dialog-box">
<h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
<p data-i18n="[html]welcome.salutation"></p>
Expand Down Expand Up @@ -71,7 +74,14 @@ <h1>Turnip Prophet</h1>

<div class="nook-phone-center">


<form class="input__form">
<div class="form__row">
<h6 data-i18n="islands.title"></h6>
<div class="input__group">
<label data-i18n="[html]islands.description"></label>
<input type="text" id="island" placeholder="..." />
</div>
</div>

<form class="input__form">
<div class="form__row">
Expand Down Expand Up @@ -111,7 +121,6 @@ <h6 data-i18n="weekdays.sunday"></h6>
<div class="input__group">
<label data-i18n="[html]prices.description"></label>
<input type="number" id="buy" placeholder="..." />

</div>
</div>
<i data-i18n="prices.open.am"></i>
Expand Down Expand Up @@ -196,6 +205,7 @@ <h6 data-i18n="weekdays.saturday"></h6>
<path fill="currentColor" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path>
</svg>
</div>
<button type="button" id="delete" class="button button--reset" name="action" data-i18n="islands.delete"></button>
<button type="button" id="reset" class="button button--reset" name="action" data-i18n="prices.reset"></button>
</form>

Expand Down Expand Up @@ -312,6 +322,7 @@ <h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/4.0.2/i18nextBrowserLanguageDetector.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js"></script>
<script src="js/chart.js"></script>
<script src="js/islands.js"></script>
<script src="js/predictions.js"></script>
<script src="js/scripts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
Expand Down