Skip to content

Commit

Permalink
feat: create ocaml playground mobile view (#2076)
Browse files Browse the repository at this point in the history 
* refactor: remove toggle logic on mobile

* fix: remove mobile check

* fix: stack on mobile

* fix: adjust height to make output visible

* feat: add trash icon to icons list

* style: add new styling to clear button

* fix: add social share icon to icons list

* style: add new styling to share button

* fix: add play icon to icon lists

* style: adjust styling of Run button

* style: change button placement in mobile view

* fix: put clear btn at bottom in mobile view, adjust height

* fix: squishy clear btn when program runs

* fix: spacing on desktop, bg-color on output

* fix: make clear btn work on both mobile and desktop

* minor adjustments

---------

Co-authored-by: sabine <[email protected]>
  • Loading branch information
@FatumaA @sabine
FatumaA and sabine authored Feb 23, 2024
1 parent 042b2c4 commit 9b1643b
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 50 deletions.
2 changes: 1 addition & 1 deletion asset/css/codemirror.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ div.cm-editor span.cm-nonmatchingbracket {
background: #1e1e1e;
height: 100%;
font-family: "Menlo", sans-serif;
padding: 28px 10px;
padding: 10px;
}

.cm-editor .cm-scroll {
Expand Down
15 changes: 15 additions & 0 deletions src/ocamlorg_frontend/components/icons.eml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,3 +415,18 @@ let file_search class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" aria-hidden="true" viewBox="0 0 30 31">
<path d="M24.375 18.3125V15.0312C24.375 13.9124 23.9305 12.8393 23.1394 12.0481C22.3482 11.257 21.2751 10.8125 20.1562 10.8125H18.2812C17.9083 10.8125 17.5506 10.6643 17.2869 10.4006C17.0232 10.1369 16.875 9.77921 16.875 9.40625V7.53125C16.875 6.41237 16.4305 5.33931 15.6394 4.54814C14.8482 3.75697 13.7751 3.3125 12.6562 3.3125H10.3125M16.8512 20.1637L18.75 22.0625M16.8512 20.1637C17.1559 19.8591 17.3978 19.4975 17.5627 19.0994C17.7276 18.7013 17.8125 18.2746 17.8125 17.8438C17.8125 16.9735 17.4668 16.1389 16.8514 15.5236C16.2361 14.9082 15.4015 14.5625 14.5312 14.5625C13.661 14.5625 12.8264 14.9082 12.2111 15.5236C11.5957 16.1389 11.25 16.9735 11.25 17.8438C11.25 18.2746 11.3349 18.7013 11.4998 19.0994C11.6647 19.4975 11.9064 19.8593 12.2111 20.1639C12.5157 20.4686 12.8775 20.7103 13.2756 20.8752C13.6737 21.0401 14.1004 21.125 14.5312 21.125C14.9621 21.125 15.3888 21.0401 15.7869 20.8752C16.185 20.7103 16.5466 20.4684 16.8512 20.1637ZM13.125 3.3125H7.03125C6.255 3.3125 5.625 3.9425 5.625 4.71875V25.3438C5.625 26.12 6.255 26.75 7.03125 26.75H22.9688C23.745 26.75 24.375 26.12 24.375 25.3438V14.5625C24.375 11.5788 23.1897 8.71733 21.08 6.60755C18.9702 4.49776 16.1087 3.3125 13.125 3.3125Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

let trash class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>

let share class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
</svg>

let play_triangle class_ =
<svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
</svg>
83 changes: 34 additions & 49 deletions src/ocamlorg_frontend/pages/playground.eml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,85 +54,70 @@ let render ~default_code =
<%s! Header.render ~show_get_started:true ~active_top_nav_item:Header.Playground () %>

<div class="flex h-full overflow-hidden">
<div id="panes" class="flex-1 flex max-h-fit">
<div id="panes" class="flex-1 flex flex-col md:flex-row max-h-fit">

<div id="pane-0" class="hidden md:flex md:flex-col w-[60%]">
<div id="pane-0" class="flex flex-col h-4/6 md:h-full w-full md:w-[60%]">
<div id="editor1" class="flex-1 flex flex-col overflow-auto"></div>
<div class="bg-code-background shadow-[inset_0px_1px_0px_rgba(255,255,255,0.1)] p-4 w-full bottom-0">
<div class="flex gap-7 w-full justify-end items-center px-4">
<div class="bg-code-background w-full bottom-0">
<div class="flex gap-7 w-full justify-between md:justify-end items-center px-2">
<button
id="share"
class="flex gap-2 hover:bg-legacy-default dark:bg-legacy-dark-default hover:bg-opacity-10 active:bg-legacy-primary-100 active:text-primary p-2 rounded-md text-legacy-lighter"
class="flex items-center justify-center px-2 h-8 m-4 space-x-2 border border-white rounded text-sm text-white hover:text-[#000] hover:bg-white hover:border-none"
>
<%s! Icons.playground_share "h-6 w-6 stroke-current" %>
Share
<span>Share</span>
<%s! Icons.share "h-4 w-4 stroke-current" %>
</button>
<button id="run" class="btn btn-md btn-ghost">
<span>Run</span>
<span>⌘⏎</span>
<button id="run" class="btn btn-sm space-x-2 mr-4">
<span class="text-lighter">RUN</span>
<%s! Icons.play_triangle "h-4 w-4" %>
</button>
</div>
</div>
</div>

<div id="pane-1" class="flex flex-col w-full md:w-[40%]">
<div
class="output-bg w-full min-h-full"
x-data="{ output: true, editor: window.innerWidth >= 767,mobile: window.innerWidth < 767 }"
@resize.window="
mobile = window.innerWidth < 767;
if(window.innerWidth < 767 && mobile == true ){
editor = true;
}
if(window.innerWidth > 767 && editor == true ){
editor = false;
output = true;
}"
>
<div class="flex justify-between text-white shadow-[inset_0px_1px_0px_rgba(255,255,255,0.1)]">
<div id="pane-1" class="flex flex-col h-2/6 md:h-full w-full md:w-[40%] bg-stone-800">

<div class="flex justify-between text-white">

<button
class="md:hidden border-b-2 border-transparent p-4"
:class="editor && mobile ? 'text-primary border-b-2 border-primary' : ''"
@click="editor = true; mobile=true; output = false;"
>
Editor
</button>
<button
:class="output && !mobile ? 'text-primary border-b-2 border-primary' : ''"
@click="output = true; mobile = false; editor = false;"
class="border-b-2 border-transparent p-4"
class="hidden md:flex border-b-2 border-transparent p-4"
>
Output
</button>

<button
class="text-white h-8 m-4 border-white btn btn-ghost btn-sm"
id="clear-output">
Clear output
<%s! Icons.close_x "h-4 w-4" %>
class="clear-output-btn hidden md:flex items-center justify-center px-2 h-8 m-4 space-x-2 border border-white rounded text-sm text-white hover:text-[#000] hover:bg-white hover:border-none">
<span> Clear </span>
<%s! Icons.trash "h-4 w-4" %>
</button>

</div>
<div class="shadow-[inset_0px_1px_0px_rgba(255,255,255,0.1)] output-container overflow-auto">
<div x-show="editor && mobile">
<div class="text-center">
<h3 class="mt-2 text-sm font-medium text-legacy-default dark:text-white">Coming Soon!</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-100">The OCaml Playground does not support mobile yet.</p>
</div>
</div>
<div class="flex flex-col justify-between space-y-4 border-dark-separator_30 border-t output-container overflow-auto">
<div
id="output"
class="h-auto flex-col overflow-auto p-4 text-white"
x-show="output && !mobile"
x-show="output"
></div>


</div>
<button
class="clear-output-btn flex md:hidden items-center justify-center px-2 h-8 m-4 space-x-2 border border-white rounded text-sm text-white hover:text-[#000] hover:bg-white hover:border-none max-w-fit">
<span> Clear </span>
<%s! Icons.trash "h-4 w-4" %>
</button>
</div>
</div>
</div>
</div>
<script>
document.getElementById("clear-output").addEventListener("click", function() {
document.getElementById("output").innerHTML = "" })
const clearOutputButtons = document.querySelectorAll(".clear-output-btn");

clearOutputButtons.forEach(function(button) {
button.addEventListener("click", function() {
document.getElementById("output").innerHTML = "";
});
});
</script>
</body>
</html>

0 comments on commit 9b1643b

Please sign in to comment.