Commit b85aa245 authored by Wolfgang Knopki's avatar Wolfgang Knopki
Browse files

Merge branch 'mnt' into 'master'

Mnt

See merge request !2
parents 2fc14e1e fff0340f
......@@ -59,8 +59,8 @@
}
.close {
position: fixed;
margin: 44px 44px;
margin-left: 44px;
margin-bottom: 44px;
.icon {display: block; }
}
......@@ -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;
}
/*! 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.
//
......
......@@ -27,6 +27,5 @@
right: 0;
z-index: 800;
pointer-events: none;
opacity: 0.25;
display: block;
}
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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,
......
......@@ -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);
@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;
}
}
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black;
border-radius: 5px;
&.in {
@include translate3d(0, 0, 0);
// FIXME questionable?
&.out {
@include translate3d(0, 10px, 0);
* {pointer-events: none !important; }
}
}
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;
}
......@@ -33,9 +33,6 @@
@include translate3d(0, 0, 0);
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
.panel-toggles {
......@@ -99,9 +96,6 @@
display: table-cell;
vertical-align: middle;
// @include backface-visibility(hidden);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
z-index: 1000;
......
@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 {
......
......@@ -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;
......
<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>
[[ 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 %}
<%- include('layouts/outer-header') -%>
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
<%- include('layouts/outer-footer') -%>
<h1>[[ message ]]</h1>
<h2>[[ error.status ]]</h2>
<pre>[[ error.stack ]]</pre>
<!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>
<%- 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') %>
{% 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 %}
<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>
<!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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment