university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

style: removed inline-css

Browse source
This commit is contained in:
Orangerot 2025-01-13 07:33:11 +01:00
parent 98b22a8f9d
commit e33747e7b3
2 changed files with 52 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
index.html
View file

@ -12,10 +12,10 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title> <title>Imagine - Image Editor</title>
</head> </head>
<body style="padding-top: 100dvh; " class="import-active"> <body class="import-active">
<div class="navbar columns is-mobile is-fixed-top"> <div class="navbar columns is-mobile is-fixed-top">
<div class="column" id="viewport"> <div class="column" id="viewport">
<div class="hero is-fullheight" style="min-height: 100dvh;"> <div class="hero is-fullheight">
<div class="hero-body"> <div class="hero-body">
<div class="container" > <div class="container" >
<canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
@ -26,46 +26,38 @@
</div> </div>
<div class="columns is-mobile is-visible-import"> <div class="columns is-mobile is-visible-import">
<div class="column"> <div class="column">
<button id="take-picture" <button id="take-picture" class="button is-large is-responsive is-fullwidth py-6" >
class="button is-large is-responsive is-fullwidth py-6" <div class="container">
style="display: flex; flex-direction: column; align-items: center;" <i class="fa-solid fa-6x fa-video mb-4"></i><br>
> Use Camera
<i class="fa-solid fa-6x fa-video mb-4"></i> </div>
Use Camera
</button> </button>
</div> </div>
<div class="column"> <div class="column">
<label for="upload-image" <label class="button is-large is-responsive is-fullwidth py-6" >
class="button is-large is-responsive is-fullwidth py-6" <input class="file-input" type="file" id="upload-image" accept="image/*">
style="display: flex; flex-direction: column; align-items: center;" <div class="container">
> <i class="fa-solid fa-6x fa-upload mb-4"></i><br>
<i class="fa-solid fa-6x fa-upload mb-4"></i> Choose a file…
<span> </div>
Upload an Image
</span>
</label> </label>
<input type="file" id="upload-image" accept="image/*" style="display: none">
</div> </div>
</div> </div>
</div><br> </div><br>
<a href="#settings" class="button is-hidden-desktop is-visible-editor" style="position: absolute; right: 30px; <a id="settings-button" href="#settings" class="button is-hidden-desktop is-visible-editor">
bottom: 30px">
<i class="fa-solid fa-sliders mr-2"></i> Settings <i class="fa-solid fa-sliders mr-2"></i> Settings
</a> </a>
<button id="back" class="button is-hidden-import" style="position: absolute; left: 30px; <button id="back" class="button is-hidden-import">
top: 30px">
<i class="fa-solid fa-arrow-left mr-2"></i> Back <i class="fa-solid fa-arrow-left mr-2"></i> Back
</button> </button>
<div style="position: absolute; bottom: 30px; left: 30px; right: 30px"> <button id="cheese" class="button is-large is-visible-camera" >
<button id="cheese" class="button is-large is-fullwidth is-visible-camera" >
<i class="fa-solid fa-camera mr-2"></i> Take a Picture <i class="fa-solid fa-camera mr-2"></i> Take a Picture
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor"> <div class="column is-narrow has-background-black-ter is-hidden-mobile is-hidden-tablet-only is-visible-editor">
<aside class="menu mr-3" style="width: 300px"> <aside class="menu mr-3">
<h1 class="title">Imagine</h1> <h1 class="title">Imagine</h1>
<h2 class="subtitle">Image Editor</h2> <h2 class="subtitle">Image Editor</h2>
@ -222,9 +214,8 @@
</aside> </aside>
</div> </div>
</div> </div>
<div class="notification is-fullwidth is-hidden-desktop is-visible-editor" style="z-index: 200"> <div id="settings" class="notification is-fullwidth is-hidden-desktop is-visible-editor">
<!-- #settings is an anhor to scroll to when clicked on the settings-button --> <!-- #settings is an anhor to scroll to when clicked on the settings-button -->
<span id="settings"></span>
<!-- #top is an anchor provided by the browser to go to the top of the page --> <!-- #top is an anchor provided by the browser to go to the top of the page -->
<a href="#top" class="delete"></a> <a href="#top" class="delete"></a>

41
style.css
View file

@ -1,18 +1,14 @@
html, body { html, body {
margin: 0px; margin: 0px;
scroll-behavior: smooth; scroll-behavior: smooth;
padding-top: 100dvh;
} }
canvas { canvas, video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
video {
width: 100%;
height: 100%;
}
body:not(.import-active) .is-visible-import { body:not(.import-active) .is-visible-import {
display: none !important; display: none !important;
} }
@ -28,3 +24,34 @@ body:not(.editor-active) .is-visible-editor {
body.import-active .is-hidden-import { body.import-active .is-hidden-import {
display: none !important; display: none !important;
} }
.hero.is-fullheight {
min-height: 100dvh;
}
#settings-button {
position: absolute;
right: 30px;
bottom: 30px
}
#back {
position: absolute;
left: 30px;
top: 30px
}
#cheese {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
}
aside {
width: 300px;
}
#settings {
z-index: 200;
}