From 5afded89ce52560e712bcd3f5369116fed450d7d Mon Sep 17 00:00:00 2001 From: iou1name Date: Fri, 1 Nov 2019 12:25:59 -0400 Subject: [PATCH] convert to tabs --- static/saddle.css | 36 ++++++++++++++++++++++++++++++++++++ static/saddle.js | 10 ++++++++++ templates/index.html | 19 +++++++++++++++++-- 3 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 static/saddle.js diff --git a/static/saddle.css b/static/saddle.css index e6939e0..fef5cb9 100644 --- a/static/saddle.css +++ b/static/saddle.css @@ -58,3 +58,39 @@ section { 0 3px 1px -2px rgba(0, 0, 0, 0.2), 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; +} diff --git a/static/saddle.js b/static/saddle.js new file mode 100644 index 0000000..62cdc4c --- /dev/null +++ b/static/saddle.js @@ -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'); +} diff --git a/templates/index.html b/templates/index.html index e5578e4..d5e025f 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,6 +3,7 @@ Saddle + @@ -13,8 +14,22 @@
-
-
+
+
+ File + URL + Text +
+
+
+
+
+
+
+
+ Imagine actually using this feature. +
+