Merge branch 'mnt' into 'master'

Mnt

See merge request !2

styles/modal.scss

@@ -59,9 +59,9 @@
   }
   
   .close {
-    position: fixed;
-    margin: 44px 44px;
-    .icon {display: block; }
+      margin-left: 44px;
+      margin-bottom: 44px;
+      .icon {display: block; }
   }
   
   figure {
@@ -135,7 +135,6 @@
   outline: none;
   display: inline-block;
   text-align: left;
-  @include user-select(none);
 
   border-radius: $radius*3;
   background-color: $light !important;
@@ -146,7 +145,6 @@
 .modal-header {
   padding: 30px 40px;
   position: relative;
-  color: $medium;
 }
 
 .close-search {
@@ -279,25 +277,5 @@
 
 // Footer (for actions)
 .modal-footer {
-  // border-bottom-left-radius: $radius;
-  // border-bottom-right-radius: $radius;
-  // background-color: $dark !important;
-  // padding: 40px;
-  // padding-top: 0px;
-  // text-align: right; // right align buttons
-  @include clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  // .btn + .btn {
-  //   margin-left: 5px;
-  //   margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-  // }
-  // // but override that for button groups
-  // .btn-group .btn + .btn {
-  //   margin-left: -1px;
-  // }
-  // // and override it for block buttons as well
-  // .btn-block + .btn-block {
-  //   margin-left: 0;
-  // }
-}
+    margin-top: 20px;
+}
\ No newline at end of file

styles/normalize.scss

 /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 
-//
-// 1. Set default font family to sans-serif.
-// 2. Prevent iOS text size adjust after orientation change, without disabling
-//    user zoom.
-//
-
-html {
-  font-family: sans-serif; // 1
-  -ms-text-size-adjust: 100%; // 2
-  -webkit-text-size-adjust: 100%; // 2
-}
-
 //
 // Remove default margin.
 //
@@ -420,4 +408,4 @@ table {
 td,
 th {
   padding: 0;
-}
+}
\ No newline at end of file

styles/section.scss

@@ -27,6 +27,5 @@
   right: 0;
   z-index: 800;
   pointer-events: none;
-  opacity: 0.25;
   display: block;
 }

styles/select-list.scss

@@ -6,22 +6,18 @@
   li {
     &.checked {
 
-      &:before {background-color: $medium !important; }
       > a,
       > span {
-        color: $medium;
       }
     }
     
     &:hover {
-      &:before {background-color: $medium; }
       > a,
       > span {
         background-color: rgba(0,0,0,0.025) !important;
       }
     }
 
-    &:before {background-color: $medium; }
     > a,
     > span {
       color: $medium;
@@ -30,7 +26,7 @@
 }
 
 .select-list {
-  &:empty:before{
+  &:empty:before {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -45,17 +41,14 @@
     opacity: 0.5;
   }
 
-  -webkit-mask-image: -webkit-gradient(linear, left top, left 15px, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
-
   background-clip: padding-box;
-  font-size: 15px;
-  line-height: 14px;
+  //font-size: 15px;
+  //line-height: 14px;
   list-style: none;
   margin: 0px;
   padding: 15px 0;
   text-align: left;
   // background-color: $dark;
-  color: $medium;
   border-radius: $radius;
   
   .divider + li span {border: none !important; }
@@ -90,15 +83,11 @@
     }
     
     &:hover {
-      // background-color: rgba(0,0,0,0.025);
-      &:before {
-        background-color: $medium;
-        display: block;
-      }
+        background-color: black;
+
       > a,
       > span {
-        color: $medium;
-        color: $dark;
+        color: white;
       }
     }
     
@@ -126,9 +115,8 @@
       display: block;
       cursor: pointer;
       white-space: nowrap;
-      color: $medium;
       margin: 0 25px;
-      padding: 16px 3px;
+      padding: 10px 0px;
       // line-height: 50px; 
       overflow: hidden;
       text-overflow: ellipsis;
@@ -154,4 +142,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

styles/space-sections.scss

@@ -118,10 +118,6 @@
   padding: 0 !important;
 
   .wrapper {
-    border: 1px dotted rgba(128,128,128,0.5);
-
-    transition-duration: 0.25s;
-    transition-property: width, height, background-color;
     background-repeat: no-repeat;
     background-size: cover;
   }
@@ -132,32 +128,27 @@
   max-height: 100%;
 
   position: relative;
-
   overflow: scroll;
-
-  /** {
-    -moz-user-select: none !important; // firefox has selection problems
-  }*/
 }
 
 .snap-ruler-h {
   pointer-events: none;
   position: fixed;
-  z-index: 0;
+  z-index: 2000;
   right: 0px;
   height: 1px;
-  background-color: rgba(0,0,0,0.5);
+  background-color: black;
   left: 0px;
 }
 
 .snap-ruler-v {
   pointer-events: none;
   position: fixed;
-  z-index: 0;
+  z-index: 2000;
   top: 0px;
   bottom: 0px;
   width: 1px;
-  background-color: rgba(0,0,0,0.5);
+  background-color: black;
 }
 
 .cursor {
@@ -227,30 +218,12 @@
 }
 
 #space {
-  /*-webkit-user-select: all;
-  -ms-user-select: all;
-  -moz-user-select: all;
-  user-select: all;*/
+  // user-select: all;
   position: relative;
   height: 100% !important;
-
-  //padding-top: 64px !important;
   background-color: #eee;
 }
 
-#made-with {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-  padding: 12px;
-  opacity: 0.25;
-  a {color: $dark; }
-  p {
-    text-align: center;
-    font-size: 11px;
-  }
-}
-
 #baseline {
   position: absolute;
   width: 100%;
@@ -298,8 +271,8 @@
 
 .space-bounds {
   position: absolute;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   pointer-events: none;
   background-size: cover;
   background-repeat: no-repeat;

styles/style.scss

@@ -65,10 +65,15 @@
 html,
 body {
   height:100%;
-  -webkit-tap-highlight-color: transparent;
   background-color: white;
-  background-color: $light;
-  color: $darker;
+  color: $black;
+}
+
+body {
+  max-width: 100%;
+  padding: 0px;
+  text-rendering: optimizeLegibility;
+  cursor: default;
 }
 
 *[contenteditable="true"] {
@@ -81,70 +86,12 @@ body {
   @include box-sizing(border-box);
 }
 
-body {
-  max-width: 100%;
-  padding: 0px;
-  text-rendering: optimizeLegibility;
-  //@include user-select(none);
-  cursor: default;
-}
-
 .img img {
   max-width: 100%;
   height: auto;
 }
 
-.plan {
-  color: $medium;
-  border-radius: $radius;
-  display: inline-block;
-  padding: 30px;
-
-  background-color: transparent;
-  border: 2px solid rgba(0,0,0,0.05);
-  width: 100%;
-
-  &.active {
-    background-color: white;
-    border: none;
-  }
-
-  h4 {
-    color: black;
-    margin-bottom: 0px;
-  }
-
-  p {
-    font-size: 13px;
-    line-height: 1.4;
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
-
-  ul {
-    list-style: none;
-    font-size: 10px;
-    margin: 0px;
-    padding: 0px;
-    border-top: 2px solid rgba(0,0,0,0.05);
-    padding-top: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    li {padding-top: 2px; }
-  }
-}
-
-#startup {
-  background-position: center;
-  background-image:url(/images/diamond.svg);
-  background-repeat: no-repeat;
-}
-
-#home {
-  background-color: white;
-}
-
-.layer {
+/*.layer {
   @include transition( all 0.2s ease-in-out);
   @include backface-visibility(hidden);
   position: absolute;
@@ -172,7 +119,7 @@ body {
     pointer-events: auto;
     opacity: 1;
   }
-}
+}*/
 
 [draggable] {
   -moz-user-select: none;

styles/table.scss

@@ -8,10 +8,9 @@
 }
 .table {
   width: 100%;
-  color: $medium;;
   font-family: $main-font;
-  // border-radius: $radius;
-  // border: 2px solid rgba(0,0,0,0.0125) !important;
+  border-radius: $radius;
+  border: 2px solid rgba(0,0,0,0.0125);
 }
 
 .table thead > tr > th:first-child, 

styles/toolbar.scss

@@ -19,50 +19,23 @@
   }
 
   margin: auto;
-  //text-align: center;
   position: fixed;
-  bottom: 0px;
-  //width: 100%;
+  top: 20px;
   z-index: 3000;
-  padding: $gutter-b;
+  padding: 0;
   font-size: 0;
   line-height: 0;
 
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
-  transition-delay: initial;
-  transition-property: opacity, transform;
-  @include backface-visibility(hidden);
+  box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
+  border: 1px solid black;
+  border-radius: 5px;
+
+  // FIXME questionable?
   
-  @include translate3d(0, 10px, 0);
   pointer-events: none !important; 
-  opacity: 0;
-  
-  &.out {
-    @include translate3d(0, 10px, 0);
-    * {pointer-events: none !important; }
-    button, input, .dialog {
-      display: none;
-    }
-  }
-
-  &.in {
-    @include translate3d(0, 0, 0);
-
-    &.out {
-      @include translate3d(0, 10px, 0);
-      * {pointer-events: none !important; }
-    }
-  }
   
   > * {
-    margin: 0 2px;
-    margin-top: 4px;
     pointer-events: auto !important; 
-    &.out {
-      margin: 0;
-      opacity: 0;
-    }
   }
 
   &.toolbar-vertical {
@@ -187,7 +160,6 @@
 }
 
 .toolbar-properties {
-  bottom: 64px;
   z-index: 0;
 
   &.in {
@@ -196,12 +168,12 @@
 
   .icon-sm {
     z-index: 110;
-    background-color: #222;
+    //background-color: #222;
     border-radius: 50px;
   }
 
   .jewel {
-    border: 2px solid rgba(255,255,255,0.5);
+    border: 2px solid #888;
     background-color: transparent;
     color: #989898;
     width: 36px;
@@ -228,5 +200,22 @@
 
 .toolbar-elements > .btn-group,
 .toolbar-properties > .btn-group {
-  box-shadow: 0 0 30px rgba(0,0,0,0.5);
+    //box-shadow: 0 0 30px rgba(0,0,0,0.5);
+    background-color: $white;
+}
+
+.toolbar-elements {
+    left: 20px;
+}
+
+.toolbar-properties {
+    right: 30px;
+}
+
+.zoom-bar {
+    position: absolute;
+    bottom: 30px;
+    right: 30px;
+    box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
+    border: 1px solid black;
 }

styles/tools.scss

@@ -33,10 +33,7 @@
   @include translate3d(0, 0, 0);
 
   // @include backface-visibility(hidden);
-  -webkit-perspective: 1000;
-     -moz-perspective: 1000;
-      -ms-perspective: 1000;
-          perspective: 1000;
+  perspective: 1000;
 
   .panel-toggles {
     @include transition( all 0.15s ease-in-out);
@@ -99,10 +96,7 @@
         display: table-cell;
         vertical-align: middle;
         // @include backface-visibility(hidden);
-        -webkit-perspective: 1000;
-           -moz-perspective: 1000;
-            -ms-perspective: 1000;
-                perspective: 1000;
+        perspective: 1000;
 
         z-index: 1000;
 

styles/type.scss

 @import "vars";
 @import "mixins";
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap');
+
 body {
   background-color: $light;
   color: $medium;
@@ -25,7 +27,7 @@ hr {
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   color: inherit;
   font-family: inherit;
-  font-weight: 500;
+  font-weight: 900;
   line-height: 1.3;
   margin-top: 0px;
   margin-bottom: 1em;
@@ -46,8 +48,7 @@ strong {font-weight: 500; }
 small {font-size: 75%; }
 
 a {
-  text-decoration: none;
-  color: $medium;
+  color: black;
 }
 
 dl {

styles/vars.scss

@@ -9,13 +9,6 @@ $green: #2ecc71;
 $red: #ff5955;
 $yellow: #f1c40f;
 
-$light: #f5f5f5;
-$lightish: #eee;
-
-
-$facebook: #3e5b97;
-$twitter: #2aa7de;
-
 $color-1  : #4a2f7e; // purple
 $color-2  : #9b59b6; // lilac
 $color-3  : #3498db; // blue
@@ -32,15 +25,18 @@ $black: #111; // black
 $darker: #292929;
 $dark: #222; // dark
 $medium: #888; // medium
+$light: #f5f5f5;
+$lightish: #eee; // fixme
 $lighter: #989898;
+$white: #ffffff;
 
 $sidebar-width: 280px;
 
-$main-font: Avenir W01;
-$sec-font: Avenir W01;
+$main-font: Inter;
+$sec-font: Inter;
 
-$font-size: 18px;
-$line-height: 24px;
+$font-size: 20px;
+$line-height: 1.5em;
 
 $gutter-a: 10px;
 $gutter-b: 20px;
@@ -48,4 +44,4 @@ $gutter-c: 40px;
 $gutter-d: 60px;
 $gutter-e: 80px;
 
-$folder-gutter: 20px;
+$folder-gutter: 20px;
\ No newline at end of file

views/artifact_list.html

-<html>
-<body>
-  <h2>[[space.name]]</h2>
-
-  <table class="table table-striped" border=1>
-  <tr>
-    <th>created</th>
-    <th>updated</th>
-    <th>filetype</th>
-    <th>filename</th>
-    <th>preview</th>
-  </tr>
-  {% for a in space.artifacts %}
-    <tr>
-      <td>[[ a.created_at | date('d.m.Y H:i') ]] by [[ a.user.email ]][[ a.editor_name ]]</td>
-      <td>[[ a.updated_at | date('d.m.Y H:i') ]] by [[ a.update_user.email ]][[ a.last_update_editor_name ]]</td>
-      <td>[[ a.mime ]]</td>
-      <td>{% if a.payload_uri %}<a href="[[a.payload_uri]]">[[ a.filename ]]</a>{% endif %}</td>
-      <td>[[ a.description ]]</td>
-    </tr>
-  {% endfor %}
-  </table>
-</body>
-</html>

views/emails/action.html

-[[ text | safe ]]
-
-{% if options.message %}
-<p>
-  <i>[[options.message]]</i>
-</p>
-{% endif %}
-{% if options.action %}<br><br>
-  <a href="[[options.action.link]]" target="_blank">[[options.action.name]]</a><br>
-{% endif %}
-

views/error.ejs

+<%- include('layouts/outer-header') -%>
+<h1><%= message %></h1>
+<h2><%= error.status %></h2>
+<pre><%= error.stack %></pre>
+<%- include('layouts/outer-footer') -%>

views/error.html

-<h1>[[ message ]]</h1>
-<h2>[[ error.status ]]</h2>
-<pre>[[ error.stack ]]</pre>

views/facebook.html

-<!DOCTYPE html>
-<html>
-  <head>
-    <title>[[space.name]]</title>
-    <meta charset="utf-8" />
-    <meta property="og:title" content="[[space.name]]" />
-    <meta property="og:description" content="" />
-    <meta property="og:updated_time" content="[[space.updated_at.getTime()]]" />
-    <meta property="og:type" content="website" />
-    <meta property="og:image" content="[[space.thumbnail_url]]" />
-  </head>
-
-  <body>
-
-    <h1>[[space.name]]</h1>
-    {% for a in space.artifacts %}
-      <tr>
-        <td>[[ a.mime ]]</td>
-        <td>[[ a.description | striptags  ]]</td>
-        <td>{% if a.payload_uri %}<a href="[[ a.payload_uri ]]">download</a>{% endif %}</td>
-      </tr>
-    {% endfor %}
-
-  </body>
-
-</html>

views/index.ejs

+<%- include('layouts/outer-header') %>
+<div id="landing">
+  <section>
+    <h1>Work Together, Visually.</h1>
+    <p>
+      Whenever you need to lay out pictures, text notes, video and audio clips on a blank canvas,
+      Spacedeck can help you.
+    </p>
+    <p>
+      Spacedeck is a browser based application. It is the right tool for you if you want to quickly put together a collage of your idea or concept, either for yourself or to share it with teammembers, clients or students. Changes are updated in realtime.
+    </p>
+    <p>
+      Spacedeck is not meant for creating polished designs, but it is a good fit for:
+    </p>
+    <ul>
+      <li>Moodboards</li>
+      <li>Collages</li>
+      <li>Teaching (Virtual Blackboards)</li>
+      <li>Shared Whiteboards</li>
+      <li>Design Thinking</li>
+    </ul>
+    <img src="/images/sd6-screenshot.png" alt="Screenshot of Spacedeck 6.0">
+    <p>
+      The hosted version of Spacedeck 6.0 is currently in beta and invite only. You can also self-host and <a href="https://github.com/spacedeck/spacedeck-open">participate in the open source development</a>.
+    </p>
+  </section>
+</div>
+<%- include('layouts/outer-footer') %>

views/index.html

-{% extends 'layouts/outer.html' %}
-
-{% block title %}[[ __("welcome") ]]{% endblock %}
-
-{% block content %}
-
-<div id="landing">
-  <div class="landing-keyvisual-wrapper">
-    <div class="landing-box">
-      <h2>[[__("landing_title")]]</h2>
-
-      <p class="lead">
-        <a href="/signup" class="btn btn-primary btn-block btn-xl">[[__("signup")]]</a>
-      </p>
-      
-      <p class="lead">
-        <a href="/login" class="btn btn-primary btn-block btn-xl">[[__("login")]]</a>
-      </p>
-
-      <p class="lead">
-        [[__("landing_claim")]]
-      </p>
-      
-      <p class="lead">
-        [[__("landing_example")]]
-      </p>
-      
-      <ul>
-        <li class="lead">
-          [[__("landing_features_1") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_2") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_3") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_4") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_5") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_6") | safe ]]
-        </li>
-
-        <li class="lead">
-          [[__("landing_features_7") | safe ]]
-        </li>
-      </ul>
-    </div>
-  </div>
-
-</div>
-
-{% endblock %}

views/layouts/outer-footer.ejs

+
+    <div class="footer">
+      <p>
+        <div class="col-xs-6">
+          &copy; 2020 <a href="https://mntre.com">MNT Research GmbH</a>, Fehlerstr. 8, 12161 Berlin, Germany<br>
+          &copy; 2011–2020 Spacedeck GmbH (in liquidation)<br>
+          Source Code: <a href="https://github.com/mntmn/spacedeck-open">https://github.com/mntmn/spacedeck-open</a>
+          <br>
+          Font: <a href="https://rsms.me/inter/">Inter by rsms</a>
+        </div>
+      </p>
+    </div>
+  </body>
+</html>

views/layouts/outer-header.ejs

+<!doctype html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>Spacedeck Open</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link href="/images/favicon.png" rel="icon" type="image/x-icon" />
+    <link rel="stylesheet" href="/stylesheets/style.css">
+  </head>
+  <body>
+    <header id="landing-header" class="header">
+      <div class="header-left">
+        <a class="btn btn-transparent btn-nude" href="<%= config.endpoint %>/"><img src="/images/sd6-logo-black.svg" width="190"></a>
+      </div>
+
+      <div class="header-right pull-right">
+        <% if (!user) { %>
+          <a class="btn btn-md btn-dark btn-round" href="/login"><%=__("login")%></a>
+          <a class="btn btn-md btn-dark btn-round" href="/signup"><%=__("signup")%></a>
+        <% } else { %>
+          <a class="btn btn-md btn-dark btn-round" href="/spaces"><%=__("spaces")%></a>
+          <a class="btn btn-md btn-dark btn-round" href="/logout"><%=__("logout")%></a>
+        <% } %>
+
+      </div>
+    </header>