iou1name/Saddle
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

convert to tabs

Browse Source
This commit is contained in:
iou1name 2019-11-01 12:25:59 -04:00
parent 7f86150031
commit 5afded89ce
3 changed files with 63 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/saddle.css
View File

@ -58,3 +58,39 @@ section {
0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12); 0 1px 5px 0 rgba(0, 0, 0, 0.12);
} }
#fileSelection {
padding: 0.25em;
}
#fileTabs {
display: flex;
}
.tab {
cursor: pointer;
padding: 1em;
color: dimgray;
}
.tab:hover {
color: black;
}
.tabSelected {
background-color: gainsboro;
color: black;
border: 1px solid darkgray;
border-bottom: none;
}
.tabWindow {
display: none;
padding: 1em;
background-color: gainsboro;
border: 1px solid darkgray;
}
.tabWindowSelected {
display: block;
}

10
static/saddle.js Normal file
View File

@ -0,0 +1,10 @@
function switchFileTab(span, window_id) {
let old_span = document.querySelector('.tabSelected');
old_span.classList.remove('tabSelected');
span.classList.add('tabSelected');
let old_window = document.querySelector('.tabWindowSelected');
old_window.classList.remove('tabWindowSelected');
let tab_window = document.querySelector('#' + window_id);
tab_window.classList.add('tabWindowSelected');
}

15
templates/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title>Saddle</title> <title>Saddle</title>
<link rel="stylesheet" type="text/css" href="/static/saddle.css"> <link rel="stylesheet" type="text/css" href="/static/saddle.css">
<script type="text/javascript" src="/static/saddle.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=0.8"> <meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="description" content="A file upload service."> <meta name="description" content="A file upload service.">
</head> </head>
@ -13,8 +14,22 @@
<main> <main>
<section> <section>
<form method="POST" enctype="multipart/form-data"> <form method="POST" enctype="multipart/form-data">
<div id="fileSelection">
<div id="fileTabs">
<span class="tab tabSelected" title="File" onclick="switchFileTab(this, 'fileTabWindow')">File</span>
<span class="tab" title="URL" onclick="switchFileTab(this, 'urlTabWindow')">URL</span>
<span class="tab" title="Text" onclick="switchFileTab(this, 'textTabWindow')">Text</span>
</div>
<div id="fileTabWindow" class="tabWindow tabWindowSelected">
<input type="file" name="files" multiple><br> <input type="file" name="files" multiple><br>
</div>
<div id="urlTabWindow" class="tabWindow">
<input type="url" name="url" placeholder="URL"><br> <input type="url" name="url" placeholder="URL"><br>
</div>
<div id="textTabWindow" class="tabWindow">
Imagine actually using this feature.
</div>
</div>
<input type="checkbox" name="rand_name" id="rand_name" checked> <input type="checkbox" name="rand_name" id="rand_name" checked>
<label for="rand_name">Generate random filename.</label><br> <label for="rand_name">Generate random filename.</label><br>
<input type="hidden" name="response_type" value="html"> <input type="hidden" name="response_type" value="html">