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

Move the toplevel buttons to the bottom-right #409

Merged
merged 2 commits into from Sep 15, 2021
Merged

Move the toplevel buttons to the bottom-right #409

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
16d2d12
Revert "Merge pull request #261 from beobillly/placement_toplevel_but…
AltGr Jul 28, 2021
d61e7c0
Fix for #400 and #202
AltGr Jul 28, 2021
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
12 changes: 5 additions & 7 deletions static/css/learnocaml_exercise.css
View file
Open in desktop
Expand Up @@ -306,7 +306,7 @@ body {
/* -------------------- toplevel tab ------------------------------ */
#learnocaml-exo-tab-toplevel > .toplevel-pane {
position: absolute;
left: 0; top: 0; bottom: 0px; width: 100%;
left: 0; top: 0; bottom: 40px; width: 100%;
z-index: 1002;
margin: 5px 0 0 0;
}
Expand All @@ -318,25 +318,23 @@ body {
}
#learnocaml-exo-tab-toplevel > .buttons {
position: absolute;
right: 1%; top: 5px; width: 49%; height: 40px;
left: 0; bottom: 0px; width: 100%; height: 39px;
background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
color: #fff;
line-height: 40px;
display: flex;
flex-direction: row;
flex-direction: row-reverse;
z-index: 1003;
border-top: 1px #000 solid;
}
#learnocaml-exo-tab-toplevel > .buttons > button {
flex: 1;
flex: 0 0.33 200px;
background: none;
border: none;
color: #222;
text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
border-top: 1px #666 solid;
position: relative;
padding: 0;
}
#learnocaml-exo-tab-toplevel > .buttons > button:not(:first-child) {
border-left: 1px #666 solid;
}
@media (max-width: 550px) {
Expand Down
4 changes: 2 additions & 2 deletions static/css/learnocaml_main.css
View file
Open in desktop
Expand Up @@ -335,11 +335,11 @@ body {
}
#learnocaml-main-toplevel > .toplevel-pane {
position: absolute;
left: 0px; top: 0; right: 0; bottom: 0px;
left: 0px; top: 0; right: 0; bottom: 40px;
}
#learnocaml-main-toplevel > .buttons {
position: absolute;
top: 13px; right: 1%; bottom: 5px; width: 49%; height: 40px;
left: 0; bottom: 0px; width: 100%; height: 40px;
background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
color: #fff;
line-height: 40px;
Expand Down
15 changes: 7 additions & 8 deletions static/exercise.html
View file
Open in desktop
Expand Up @@ -99,6 +99,13 @@
<!-- <iframe src="/standalone-descr.html"></iframe> -->
</div>
<div id="learnocaml-exo-tab-toplevel" class="front-tab">
<div id="learnocaml-exo-toplevel-pane" class="toplevel-pane">
<!-- <pre class="output"></pre> -->
<!-- <pre class="input"> -->
<!-- <code id="sharp" class="sharp"></code> -->
<!-- <textarea class="console" style="height: 28px">saucisse</textarea> -->
<!-- </pre> -->
</div>
<div id="learnocaml-exo-toplevel-toolbar" class="buttons">
<!-- Any button can be added.
Structure: button>img, button>span.label. -->
Expand All @@ -115,14 +122,6 @@
<!-- <span class="label">Download</span> -->
<!-- </button> -->
</div>
<div id="learnocaml-exo-toplevel-pane" class="toplevel-pane">
<!-- <pre class="output"></pre> -->
<!-- <pre class="input"> -->
<!-- <code id="sharp" class="sharp"></code> -->
<!-- <textarea class="console" style="height: 28px">saucisse</textarea> -->
<!-- </pre> -->
</div>

</div>
<div id="learnocaml-exo-tab-report">
<!-- Using an iframe is the easiest way to isolate the CSSs. -->
Expand Down