Make file upload work on mobile devices (#15)

* Make input visible so it works on iOS/Android * Basic refactor
lanedirt · Nov 25, 2024 · 30140e7 · 30140e7
1 parent a84b229
commit 30140e7
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 272 deletions.
diff --git a/src/Mov2Gif.Client/Components/App.razor b/src/Mov2Gif.Client/Components/App.razor
@@ -3,7 +3,7 @@
 
 <head>
 	<meta charset="utf-8"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 	<base href="/"/>
 	<link rel="stylesheet" href="css/tailwind.css"/>
 	<link rel="stylesheet" href="css/app.css"/>

diff --git a/src/Mov2Gif.Client/Components/Layout/Footer.razor b/src/Mov2Gif.Client/Components/Layout/Footer.razor
@@ -0,0 +1,7 @@
+<footer class="py-4 text-center text-sm text-gray-500 border-t border-gray-300 mx-8">
+    Mov2Gif is an open source project by
+    <a href="https://github.com/lanedirt/mov2gif"
+       class="text-blue-600 hover:text-blue-800 hover:underline"
+       target="_blank"
+       rel="noopener noreferrer">Lanedirt</a>
+</footer>
diff --git a/src/Mov2Gif.Client/Components/Layout/MainLayout.razor b/src/Mov2Gif.Client/Components/Layout/MainLayout.razor
@@ -2,7 +2,9 @@
 
 <main class="container mx-auto px-4 py-8">
     @Body
-</main>
+</main>         
+
+<Footer />
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.

diff --git a/src/Mov2Gif.Client/Components/Layout/MainLayout.razor.css b/src/Mov2Gif.Client/Components/Layout/MainLayout.razor.css
@@ -1,81 +1,3 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}
-
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;