Skip to content

Save user solutions and show them on page #231

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

Open
wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

Save user solutions and show them on page #231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e7f8aa3
Save user solutions and show them on page
RedWideWeb Jun 27, 2022
17eb7bf
Update restaurant.js
RedWideWeb Jun 27, 2022
9f43723
Added HARDCORE mode. You have no selectors shown, hints or examples. …
RedWideWeb Jun 27, 2022
05bcebb
Navigation made easier. You can press arrow keys to navigate levels w…
RedWideWeb Jun 27, 2022
9ed9f0f
Focus on input when game/level is loaded
RedWideWeb Jun 27, 2022
d7ce00b
Save last input value
RedWideWeb Jun 27, 2022
0652715
Game win now properly triggers. If you have any unfinished levels the…
RedWideWeb Jun 27, 2022
0a39d2d
Game now properly registers [class] selector. Previously it wouldn't …
RedWideWeb Jun 27, 2022
8dbff3b
Reduce width of the window to look prettier (not ideal solution)
RedWideWeb Jun 27, 2022
17c2bb9
Made right-col scrollable in case Solutions list is too big
RedWideWeb Jun 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 52 additions & 7 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,7 +607,7 @@ apple[data-hovered="true"] {
*/

.helper {
position: absolute;
position: fixed;
background: white;
padding: 10px 15px 12px 15px;
z-index: 1000;
Expand Down Expand Up @@ -689,23 +689,37 @@ orange {
line-height: 150%;
}

.display-help .examples-title {
.display-help .examples-title,
.display-help .solutions-title{
margin: 45px 0 10px 0;
padding: 0;
}

.display-help .hint,
.display-help solution,
.display-help .example {
color: #888;
font-size: 15px;
}

.display-help .example {
.display-help .example,
.display-help solution {
border-bottom: solid 1px rgba(255,255,255,.1);
padding: 10px 0 12px 0;
line-height: 170%;
}

.display-help .solutions:not(empty) {
padding: 10px 0 12px 0;
line-height: 170%;
overflow: hidden;
}

.display-help .solutions:empty {
padding: 0;
line-height: 170%;
}

.display-help .example:last-child {
border: none;
}
Expand All @@ -721,6 +735,18 @@ orange {
font-weight: normal;
}

.display-help solution {
display: inline-block;
color: #AAA;
background: rgba(255,255,255,.1);
border: none;
padding: 0 6px 0 6px;
margin: 2px 4px 2px 0;
font-size: 13px;
font-family: menlo,monospace;
font-weight: normal;
}

Comment on lines +738 to +749
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy paste from tag but with slighlty different margins to look good inline

.display-help .example strong:first-of-type {
margin-left: 0px;
}
Expand Down Expand Up @@ -890,7 +916,7 @@ plate orange:nth-last-child(4)
text-align: center;
margin-top: 35px;
padding: 20px 0;
width: 725px;
width: 100%;
color: rgba(255,255,255,.3);
font-size: 15px;
margin: 0 auto;
Expand Down Expand Up @@ -934,13 +960,13 @@ plate orange:nth-last-child(4)
}

.left-col {
width: calc(100% - 375px);
width: calc(100% - 375px - ((100vw - 1600px) * 1.2));
text-align: center;
overflow-x: visible;
position: fixed;
top: 0;
bottom: 0;
left: 0;
left: calc((100vw - 1600px) * 0.6);
z-index: 2;
}

Expand All @@ -949,7 +975,7 @@ plate orange:nth-last-child(4)
.right-col {
position: fixed;
width: 375px;
right: 0;
right: calc((100vw - 1600px) * 0.6);
/* overflow: auto;*/
top: 40px;
top: 0;
Expand All @@ -958,6 +984,17 @@ plate orange:nth-last-child(4)
z-index: 1;
}

@media (max-width: 1600px) {
.left-col {
width: calc(100% - 375px);
left: 0;
}

.right-col {
right: 0;
}
}

.level-menu {
position: absolute;
top: 0;
Expand Down Expand Up @@ -1256,6 +1293,14 @@ tag:after {
content: ">";
}

solution {
cursor: pointer;
padding: 0 3px;
color: #AAA;
font-size: 13px;
font-weight: bold;
}

Comment on lines +1296 to +1303
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Show it's clickable via pointer cursor

.nametags {
z-index: 1;
width: 100%;
Expand Down
2 changes: 2 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,8 @@ <h3 class="selector-name"></h3>
<h2 class="title"></h2>
<h3 class="syntax"></h3>
<div class="hint"></div>
<h4 class="solutions-title">Solutions</h4>
<div class="solutions"></div>
Comment on lines +155 to +156
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add Sulotions title and container much like examples

<h4 class="examples-title">Examples</h4>
<div class="examples"></div>
</div>
Expand Down
Loading