From bd1122cc0e3c5524bea6f4dc97422eaeb52ed8d2 Mon Sep 17 00:00:00 2001 From: Jojo144 Date: Thu, 7 May 2020 22:34:31 +0200 Subject: [PATCH] Integrate illustrations as a showcase (#544) Integrate some custom graphics, and a whole comics explanation, only in French for now. Fix #363 --- CONTRIBUTORS | 2 + ihatemoney/static/css/main.css | 36 +- ihatemoney/static/images/bill.svg | 88 ++++ .../static/images/hand-holding-heart.svg | 1 - ihatemoney/static/images/indicate.svg | 88 ++++ ihatemoney/static/images/read.svg | 55 ++ ihatemoney/static/images/share.svg | 108 ++++ .../photoswipe/default-skin/default-skin.css | 482 ++++++++++++++++++ .../photoswipe/default-skin/default-skin.png | Bin 0 -> 547 bytes .../photoswipe/default-skin/default-skin.svg | 1 + .../photoswipe/default-skin/preloader.gif | Bin 0 -> 866 bytes .../photoswipe/photoswipe-ui-default.min.js | 4 + ihatemoney/static/photoswipe/photoswipe.css | 179 +++++++ .../static/photoswipe/photoswipe.min.js | 4 + ihatemoney/static/showcase/1.jpg | Bin 0 -> 615970 bytes ihatemoney/static/showcase/2.jpg | Bin 0 -> 547569 bytes ihatemoney/static/showcase/3.jpg | Bin 0 -> 458429 bytes ihatemoney/static/showcase/4.jpg | Bin 0 -> 503363 bytes ihatemoney/static/showcase/5.jpg | Bin 0 -> 494043 bytes ihatemoney/static/showcase/6.jpg | Bin 0 -> 772276 bytes ihatemoney/static/showcase/7.jpg | Bin 0 -> 525746 bytes ihatemoney/static/showcase/8.jpg | Bin 0 -> 628212 bytes ihatemoney/static/showcase/9.jpg | Bin 0 -> 842860 bytes ihatemoney/static/showcase/showcase.png | Bin 0 -> 81952 bytes ihatemoney/templates/edit_project.html | 8 +- ihatemoney/templates/history.html | 2 +- ihatemoney/templates/home.html | 21 +- ihatemoney/templates/layout.html | 4 +- ihatemoney/templates/list_bills.html | 12 +- ihatemoney/templates/showcase.html | 67 +++ 30 files changed, 1139 insertions(+), 23 deletions(-) create mode 100644 ihatemoney/static/images/bill.svg delete mode 100644 ihatemoney/static/images/hand-holding-heart.svg create mode 100644 ihatemoney/static/images/indicate.svg create mode 100644 ihatemoney/static/images/read.svg create mode 100644 ihatemoney/static/images/share.svg create mode 100644 ihatemoney/static/photoswipe/default-skin/default-skin.css create mode 100644 ihatemoney/static/photoswipe/default-skin/default-skin.png create mode 100644 ihatemoney/static/photoswipe/default-skin/default-skin.svg create mode 100644 ihatemoney/static/photoswipe/default-skin/preloader.gif create mode 100644 ihatemoney/static/photoswipe/photoswipe-ui-default.min.js create mode 100644 ihatemoney/static/photoswipe/photoswipe.css create mode 100644 ihatemoney/static/photoswipe/photoswipe.min.js create mode 100644 ihatemoney/static/showcase/1.jpg create mode 100644 ihatemoney/static/showcase/2.jpg create mode 100644 ihatemoney/static/showcase/3.jpg create mode 100644 ihatemoney/static/showcase/4.jpg create mode 100644 ihatemoney/static/showcase/5.jpg create mode 100644 ihatemoney/static/showcase/6.jpg create mode 100644 ihatemoney/static/showcase/7.jpg create mode 100644 ihatemoney/static/showcase/8.jpg create mode 100644 ihatemoney/static/showcase/9.jpg create mode 100644 ihatemoney/static/showcase/showcase.png create mode 100644 ihatemoney/templates/showcase.html diff --git a/CONTRIBUTORS b/CONTRIBUTORS index 340471df..bd4d363e 100644 --- a/CONTRIBUTORS +++ b/CONTRIBUTORS @@ -45,3 +45,5 @@ THANOS SIOURDAKIS Toover Xavier Mehrenberger zorun + +The manual drawings are from Coline Billon, they are under CC BY 4.0. diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css index 7d91c38d..ec1481bc 100644 --- a/ihatemoney/static/css/main.css +++ b/ihatemoney/static/css/main.css @@ -50,16 +50,28 @@ body { font-size: 2.4em; } -#header .tryout { - margin-right: 10em; +#header .tryout, #header .showcase { color: #fff; background-color: #414141; border-color: #414141; + margin-left: 3px; + margin-right: 3px; } -#header .tryout:hover { +#header .tryout:hover, #header .showcase:hover { background-color: #606060; border-color: #606060; + cursor: pointer; +} + +#header .showcaseimg { + width: 55px; +} + +#header .shareimg { + width: 80px; + margin-left: 5px; + margin-bottom: 8px; } #header .additional-content { @@ -168,10 +180,10 @@ body { border: 0; } -.empty-bill .hand-holding-heart svg { +.empty-bill .billimg svg { fill: lightgray; - height: 5em; - width: 5em; + height: 6em; + width: 4em; } .invites textarea { @@ -535,11 +547,17 @@ tr:hover .extra-info { width: 1.2em; /* protection for IE11 */ } +.icon.high svg { + height: 2em; + margin-top: -0.2em; + margin-bottom: -0.2em; +} + .download-project .icon svg { fill: white; } -.icon.plus svg { +.icon.before-text svg { margin-right: 3px; } footer .icon svg { @@ -562,6 +580,10 @@ footer .icon svg { width: 200px; } +.hiddenpswp { + display: none; +} + #history_warnings { margin-top: 30px; } diff --git a/ihatemoney/static/images/bill.svg b/ihatemoney/static/images/bill.svg new file mode 100644 index 00000000..7272fa22 --- /dev/null +++ b/ihatemoney/static/images/bill.svg @@ -0,0 +1,88 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + + + + + diff --git a/ihatemoney/static/images/hand-holding-heart.svg b/ihatemoney/static/images/hand-holding-heart.svg deleted file mode 100644 index 65ee45e7..00000000 --- a/ihatemoney/static/images/hand-holding-heart.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ihatemoney/static/images/indicate.svg b/ihatemoney/static/images/indicate.svg new file mode 100644 index 00000000..1d6caae6 --- /dev/null +++ b/ihatemoney/static/images/indicate.svg @@ -0,0 +1,88 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + diff --git a/ihatemoney/static/images/read.svg b/ihatemoney/static/images/read.svg new file mode 100644 index 00000000..e35bf59e --- /dev/null +++ b/ihatemoney/static/images/read.svg @@ -0,0 +1,55 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + diff --git a/ihatemoney/static/images/share.svg b/ihatemoney/static/images/share.svg new file mode 100644 index 00000000..cfdc9fe5 --- /dev/null +++ b/ihatemoney/static/images/share.svg @@ -0,0 +1,108 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + + + + + + + + + + + diff --git a/ihatemoney/static/photoswipe/default-skin/default-skin.css b/ihatemoney/static/photoswipe/default-skin/default-skin.css new file mode 100644 index 00000000..c9616326 --- /dev/null +++ b/ihatemoney/static/photoswipe/default-skin/default-skin.css @@ -0,0 +1,482 @@ +/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ +/* + + Contents: + + 1. Buttons + 2. Share modal and links + 3. Index indicator ("1 of X" counter) + 4. Caption + 5. Loading indicator + 6. Additional styles (root element, top bar, idle state, hidden state, etc.) + +*/ +/* + + 1. Buttons + + */ +/* +
+
+
+
+
+
+
+ + + + + + +
+
+
+ + + +