Skip to content

GitLab

Commit 80f9b0d9 authored by mntmn's avatar mntmn
Browse files

Spacedeck 6.0 CI WIP; more style, UX cleanups; fix account dialog; add more... 

Spacedeck 6.0 CI WIP; more style, UX cleanups; fix account dialog; add more color swatches; new landing page
parent 58250a72
Hide whitespace changes
Inline Side-by-side
styles/section.scss
View file @ 80f9b0d9
...@@ -27,6 +27,5 @@ ...@@ -27,6 +27,5 @@
right: 0; right: 0;
z-index: 800; z-index: 800;
pointer-events: none; pointer-events: none;
opacity: 0.25;
display: block; display: block;
} }
styles/select-list.scss
View file @ 80f9b0d9
...@@ -6,22 +6,18 @@ ...@@ -6,22 +6,18 @@
li { li {
&.checked { &.checked {
&:before {background-color: $medium !important; }
> a, > a,
> span { > span {
color: $medium;
} }
} }
&:hover { &:hover {
&:before {background-color: $medium; }
> a, > a,
> span { > span {
background-color: rgba(0,0,0,0.025) !important; background-color: rgba(0,0,0,0.025) !important;
} }
} }
&:before {background-color: $medium; }
> a, > a,
> span { > span {
color: $medium; color: $medium;
...@@ -30,7 +26,7 @@ ...@@ -30,7 +26,7 @@
} }
.select-list { .select-list {
&:empty:before{ &:empty:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
...@@ -45,17 +41,14 @@ ...@@ -45,17 +41,14 @@
opacity: 0.5; 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; background-clip: padding-box;
font-size: 15px; //font-size: 15px;
line-height: 14px; //line-height: 14px;
list-style: none; list-style: none;
margin: 0px; margin: 0px;
padding: 15px 0; padding: 15px 0;
text-align: left; text-align: left;
// background-color: $dark; // background-color: $dark;
color: $medium;
border-radius: $radius; border-radius: $radius;
.divider + li span {border: none !important; } .divider + li span {border: none !important; }
...@@ -90,15 +83,11 @@ ...@@ -90,15 +83,11 @@
} }
&:hover { &:hover {
// background-color: rgba(0,0,0,0.025); background-color: black;
&:before {
background-color: $medium;
display: block;
}
> a, > a,
> span { > span {
color: $medium; color: white;
color: $dark;
} }
} }
...@@ -126,9 +115,8 @@ ...@@ -126,9 +115,8 @@
display: block; display: block;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
color: $medium;
margin: 0 25px; margin: 0 25px;
padding: 16px 3px; padding: 10px 0px;
// line-height: 50px; // line-height: 50px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -154,4 +142,4 @@ ...@@ -154,4 +142,4 @@
} }
} }
} }
} }
\ No newline at end of file
styles/style.scss
View file @ 80f9b0d9
...@@ -65,10 +65,17 @@ ...@@ -65,10 +65,17 @@
html, html,
body { body {
height:100%; height:100%;
background-color: $light; background-color: white;
color: $black; color: $black;
} }
body {
max-width: 100%;
padding: 0px;
text-rendering: optimizeLegibility;
cursor: default;
}
*[contenteditable="true"] { *[contenteditable="true"] {
outline: none; outline: none;
} }
...@@ -79,31 +86,12 @@ body { ...@@ -79,31 +86,12 @@ body {
@include box-sizing(border-box); @include box-sizing(border-box);
} }
body {
max-width: 100%;
padding: 0px;
text-rendering: optimizeLegibility;
//@include user-select(none);
cursor: default;
}
#home {
background-color: white;
}
.img img { .img img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
#startup { /*.layer {
background-position: center;
background-image:url(/images/diamond.svg);
background-repeat: no-repeat;
}
.layer {
@include transition( all 0.2s ease-in-out); @include transition( all 0.2s ease-in-out);
@include backface-visibility(hidden); @include backface-visibility(hidden);
position: absolute; position: absolute;
...@@ -131,7 +119,7 @@ body { ...@@ -131,7 +119,7 @@ body {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
} }
} }*/
[draggable] { [draggable] {
-moz-user-select: none; -moz-user-select: none;
......
styles/toolbar.scss
View file @ 80f9b0d9
...@@ -20,12 +20,16 @@ ...@@ -20,12 +20,16 @@
margin: auto; margin: auto;
position: fixed; position: fixed;
top: 10px; top: 20px;
z-index: 3000; z-index: 3000;
padding: 0; padding: 0;
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black;
border-radius: 5px;
// FIXME questionable? // FIXME questionable?
pointer-events: none !important; pointer-events: none !important;
...@@ -201,10 +205,17 @@ ...@@ -201,10 +205,17 @@
} }
.toolbar-elements { .toolbar-elements {
left: 10px; left: 20px;
} }
.toolbar-properties { .toolbar-properties {
right: 20px; 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/type.scss
View file @ 80f9b0d9
@import "vars"; @import "vars";
@import "mixins"; @import "mixins";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;900&display=swap');
body { body {
background-color: $light; background-color: $light;
color: $medium; color: $medium;
...@@ -25,7 +27,7 @@ hr { ...@@ -25,7 +27,7 @@ hr {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: inherit; color: inherit;
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 900;
line-height: 1.3; line-height: 1.3;
margin-top: 0px; margin-top: 0px;
margin-bottom: 1em; margin-bottom: 1em;
...@@ -46,8 +48,7 @@ strong {font-weight: 500; } ...@@ -46,8 +48,7 @@ strong {font-weight: 500; }
small {font-size: 75%; } small {font-size: 75%; }
a { a {
text-decoration: none; color: black;
color: $medium;
} }
dl { dl {
......
styles/vars.scss
View file @ 80f9b0d9
...@@ -35,7 +35,7 @@ $sidebar-width: 280px; ...@@ -35,7 +35,7 @@ $sidebar-width: 280px;
$main-font: Inter; $main-font: Inter;
$sec-font: Inter; $sec-font: Inter;
$font-size: 12pt; $font-size: 20px;
$line-height: 1.5em; $line-height: 1.5em;
$gutter-a: 10px; $gutter-a: 10px;
......
views/index.html
View file @ 80f9b0d9
{% extends 'layouts/outer.html' %} {% extends 'layouts/outer.html' %}
{% block title %}[[ __("welcome") ]]{% endblock %} {% block title %}Spacedeck{% endblock %}
{% block content %} {% block content %}
<div id="landing"> <div id="landing">
<div class="landing-keyvisual-wrapper"> <section>
<div class="landing-box"> <h1>Work Together, Visually.</h1>
<h2>[[__("landing_title")]]</h2> <p>
Whenever you need to lay out pictures, text notes, video and audio clips on a blank canvas,
<p class="lead"> Spacedeck can help you.
<a href="/signup" class="btn btn-primary btn-block btn-xl">[[__("signup")]]</a> </p>
</p> <p>
Spacedeck is the right tool for you if you want to quickly put together a collage of your
<p class="lead"> idea or concept, either for yourself or to share it with teammembers, clients or students.
<a href="/login" class="btn btn-primary btn-block btn-xl">[[__("login")]]</a> </p>
</p> <p>
Spacedeck is not meant for creating polished designs, but it is a good fit for:
<p class="lead"> </p>
[[__("landing_claim")]] <ul>
</p> <li>Moodboards</li>
<li>Collages</li>
<p class="lead"> <li>Teaching (Virtual Blackboards)</li>
[[__("landing_example")]] <li>Shared Whiteboards</li>
</p> <li>Design Thinking</li>
</ul>
<ul> <p>
<li class="lead"> 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>.
[[__("landing_features_1") | safe ]] </p>
</li> </section>
<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> </div>
{% endblock %} {% endblock %}
views/layouts/outer.html
View file @ 80f9b0d9
...@@ -9,36 +9,25 @@ ...@@ -9,36 +9,25 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="[[ '/images/favicon.png' | cdn ]]" rel="icon" type="image/x-icon" /> <link href="[[ '/images/favicon.png' | cdn ]]" rel="icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="[[ '/stylesheets/style.css' | cdn ]]"> <link rel="stylesheet" href="[[ '/stylesheets/style.css' | cdn ]]">
<script> var csrf_token = '[[ csrf_token ]]'; </script> <script> var csrf_token = '[[ csrf_token ]]'; </script>
<script src="[[ '/javascripts/jquery-2.1.4.min.js' | cdn ]]"></script> <!--script src="[[ '/javascripts/jquery-2.1.4.min.js' | cdn ]]"></script-->
</head> </head>
<body> <body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<header id="landing-header" class="header"> <header id="landing-header" class="header">
<div class="header-left"> <div class="header-left">
<a class="btn btn-transparent btn-nude" href="[[config.endpoint]]/"><img src="[[ '/images/sd5-logo.svg' | cdn ]]" width="190"></a> <a class="btn btn-transparent btn-nude" href="[[config.endpoint]]/"><img src="[[ '/images/sd6-logo-black.svg' | cdn ]]" width="190"></a>
</div> </div>
<div class="header-right pull-right"> <div class="header-right pull-right">
{% if !user %} {% if !user %}
<span class="btn-group dark round">
{% if (locale != "de") %}<a href="/t/de" rel="alternate" hreflang="de" class="btn btn-transparent btn-md">Deutsch</a>{% endif %}
{% if (locale != "en") %}<a href="/t/en" rel="alternate" hreflang="en" class="btn btn-transparent btn-md">English</a>{% endif %}
{% if (locale != "fr") %}<a href="/t/fr" rel="alternate" hreflang="fr" class="btn btn-transparent btn-md">Français</a>{% endif %}
</span>
<a class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a> <a class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a>
<a class="btn btn-md btn-blue btn-round" href="/signup">[[__("signup")]]</a> <a class="btn btn-md btn-dark btn-round" href="/signup">[[__("signup")]]</a>
{% else %} {% else %}
<a class="btn btn-md btn-blue btn-round" href="/spaces">[[__("spaces")]]</a> <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> <a class="btn btn-md btn-dark btn-round" href="/logout">[[__("logout")]]</a>
{% endif %} {% endif %}
</div> </div>
...@@ -49,8 +38,11 @@ ...@@ -49,8 +38,11 @@
<div class="footer"> <div class="footer">
<p> <p>
<div class="col-xs-6"> <div class="col-xs-6">
<a href="/contact">[[ __("contact") ]]</a> &copy; 2020 <a href="https://mntre.com">MNT Research GmbH</a>, Fehlerstr. 8, 12161 Berlin, Germany<br>
<span style="color:#888">&copy; 2011–2020 The Spacedeck Open Developers <a href="https://github.com/spacedeck/spacedeck-open">https://github.com/spacedeck/spacedeck-open</a></span> &copy; 2011–2019 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> </div>
</p> </p>
</div> </div>
......
views/partials/account.html
View file @ 80f9b0d9
<div id="team" class="dialog in" style="padding:100px;z-index:20000;position:absolute;width:100%;min-height:100%;background-color:#eee" v-if="active_view == 'account' && user" v-cloak> <header id="dialog-header" class="header" v-if="(active_view == 'account' && user)" v-cloak>
<div v-cloak class="header-left pull-left">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-svg icon-sd6"></span>
</a>
<h5>Edit Account</h5>
</div>
<div class="header-right pull-right">
<a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-cross-0"></span>
</a>
</div>
<a href="/spaces" class="btn btn-round btn-icon btn-dark btn-md pull-right" style="position:absolute;top:30px;right:30px"><span class="icon icon-cross-0"></span></a> </header>
<div class="dialog-freestanding dialog in" v-if="active_view == 'account' && user" v-cloak>
<div class="dialog-tabs" style="margin:auto"> <div class="dialog-tabs" style="margin:auto">
<div class="dialog-tab" v-bind:class="{open:account=='profile'}" v-on:click="account='profile'"><span>[[__("profile_caption")]]</span></div> <div class="dialog-tab" v-bind:class="{open:account=='profile'}" v-on:click="account='profile'"><span>[[__("profile_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='language'}" v-on:click="account='language'"><span>[[__("language_caption")]]</span></div> <div class="dialog-tab" v-bind:class="{open:account=='language'}" v-on:click="account='language'"><span>[[__("language_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='notifications'}" v-on:click="account='notifications'"><span>[[__("notifications_caption")]]</span></div> <div class="dialog-tab" v-bind:class="{open:account=='notifications'}" v-on:click="account='notifications'"><span>[[__("notifications_caption")]]</span></div>
<div class="dialog-tab" v-if="user.account_type=='email'" v-bind:class="{open:account=='password'}" v-on:click="account='password'"><span>[[__("password_caption")]]</span></div> <div class="dialog-tab" v-bind:class="{open:account=='password'}" v-on:click="account='password'"><span>[[__("password_caption")]]</span></div>
<div class="dialog-tab" v-bind:class="{open:account=='terminate'}" v-on:click="account='terminate'"><span>[[__("terminate_caption")]]</span></div> <div class="dialog-tab" v-bind:class="{open:account=='terminate'}" v-on:click="account='terminate'"><span>[[__("terminate_caption")]]</span></div>
</div> </div>
<div class="dialog-section text-left" style="background-color:#f5f5f5;padding-top:40px;padding-bottom:40px"> <div class="dialog-section text-left">
<div class="collapse" v-bind:class="{in:account=='profile'}"> <div class="collapse" v-bind:class="{in:account=='profile'}">
<div class="labels-inline relative" style="margin-bottom:40px"> <div class="labels-inline relative" style="margin-bottom:40px">
<div class="form-group"> <div class="form-group">
...@@ -64,30 +78,16 @@ ...@@ -64,30 +78,16 @@
v-on:change="user.email_changed=true" v-on:change="user.email_changed=true"
placeholder="mail@example.com"> placeholder="mail@example.com">
<button class="btn btn-md btn-darken" v-if="user.account_type=='email'" v-on:click=" save_user()" style="margin-top:20px">[[__("ok")]]</button> <button class="btn btn-md btn-dark" v-on:click=" save_user()" style="margin-top:20px">Save</button>
</div> </div>
<div class="form-group" v-if="!user.confirmed_at"> <!--div class="form-group">
<p v-if="!user.confirmed_at && !account_confirmed_sent">[[__("confirmation_sent_long")]]</p>
<span
class="btn btn-xs btn-stroke-darken btn-round"
v-on:click=" confirm_again()"
v-if="!user.confirmed_at && !account_confirmed_sent"
>[[__("send_again")]]</span>
<p v-if="account_confirmed_sent">
<span class="icon icon-check"></span> <span>[[__("confirmation_sent_another")]]</span>
</p>
</div>
<div class="form-group">
<label class="label">Spacedeck.com Data Import</label> <label class="label">Spacedeck.com Data Import</label>
<p v-if="!importables">No .ZIP files found in Spacedeck application folder.</p> <p v-if="!importables">No .ZIP files found in Spacedeck application folder.</p>
<ul> <ul>
<li v-for="f in importables">{{f}} <button v-on:click="start_zip_import(f)">Start Import</button></li> <li v-for="f in importables">{{f}} <button v-on:click="start_zip_import(f)">Start Import</button></li>
</ul> </ul>
</div> </div-->
</div> </div>
</div> </div>
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
</div> </div>
<div class="collapse" v-bind:class="{in:account=='password'}"> <div class="collapse" v-bind:class="{in:account=='password'}">
<h4 class="modal-title">Change Password</h4> <h4>Change Password</h4>
<div class="modal-section labels-inline"> <div class="modal-section labels-inline">
<div class="form-group"> <div class="form-group">
<label class="label">[[__("current_password")]]</label> <label class="label">[[__("current_password")]]</label>
...@@ -140,13 +140,11 @@ ...@@ -140,13 +140,11 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="btn-cluster">
<button <button
class="btn btn-transparent btn-block" class="btn btn-dark btn-md"
v-on:click="save_user_password(password_change_current, password_change_new, password_change_new_confirmation);" > v-on:click="save_user_password(password_change_current, password_change_new, password_change_new_confirmation);" >
[[__("change_password")]] [[__("change_password")]]
</button> </button>
</div>
</div> </div>
</div> </div>
...@@ -156,7 +154,7 @@ ...@@ -156,7 +154,7 @@
<p>[[__("terminate_warning2")]]</p> <p>[[__("terminate_warning2")]]</p>
</div> </div>
<div class="labels-inline" v-if="user.account_type == 'email'"> <div class="labels-inline">
<div class="form-group"> <div class="form-group">
<label class="label">[[__("current_password")]]</label> <label class="label">[[__("current_password")]]</label>
<input v-model="account_remove_password" class="input input-white no-b" type="password"> <input v-model="account_remove_password" class="input input-white no-b" type="password">
...@@ -170,7 +168,7 @@ ...@@ -170,7 +168,7 @@
<div class="center alert alert-danger" v-if="account_remove_error">{{account_remove_error}}</div> <div class="center alert alert-danger" v-if="account_remove_error">{{account_remove_error}}</div>
</div> </div>
<button class="btn btn-transparent btn-block" v-on:click="remove_account(account_remove_password, account_remove_feedback)">[[__("terminate_terminate")]]</button> <button class="btn btn-stroke-darken btn-md" v-on:click="remove_account(account_remove_password, account_remove_feedback)">Terminate Account</button>
</div> </div>
</div> </div>
......
views/partials/folders.html
View file @ 80f9b0d9
<header id="folder-header" class="header" v-if="(active_view == 'folders' && active_folder)" v-cloak> <header id="folder-header" class="header" v-if="(active_view == 'folders' && active_folder)" v-cloak>
<div v-cloak class="header-left pull-left"> <div v-cloak class="header-left pull-left">
<a class="btn btn-stroke-darken btn-md btn-round btn-icon" href="/spaces"> <a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
<span class="icon icon-home"></span> <span class="icon icon-svg icon-sd6"></span>
</a> </a>
<button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-primary btn-md btn-round" v-on:click="create_space('space')">[[ __('create_space') ]]</button> <button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-dark btn-md btn-round" v-on:click="create_space('space')">[[ __('create_space') ]]</button>
<button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-stroke-darken btn-md btn-round" v-on:click="create_space('folder')"> <button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-stroke-darken btn-md btn-round" v-on:click="create_space('folder')">
<span>[[ __('create_folder') ]]</span> <span>[[ __('create_folder') ]]</span>
</button> </button>
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="header-right pull-right"> <div class="header-right pull-right">
<div class="dropdown top right light" v-bind:class="{open: active_dropdown=='account'}"> <div class="dropdown top right light" v-bind:class="{open: active_dropdown=='account'}">
<button <button
class="profile-avatar btn btn-md btn-icon btn-darken btn-round" class="profile-avatar btn btn-md btn-icon btn-dark btn-round"
v-bind:style="background_image_style([user.avatar_thumb_uri])" v-bind:style="background_image_style([user.avatar_thumb_uri])"
v-bind:class="{'has-avatar-image':!!user.avatar_thumb_uri}" v-on:click="show_account();"> v-bind:class="{'has-avatar-image':!!user.avatar_thumb_uri}" v-on:click="show_account();">
<span class="icon icon-user" v-if="logged_in && !user.avatar_thumb_uri"></span></button> <span class="icon icon-user" v-if="logged_in && !user.avatar_thumb_uri"></span></button>
...@@ -81,12 +81,12 @@ ...@@ -81,12 +81,12 @@
</div> </div>
<div class="btn-group dark round" id="meta-toggle" style="margin-right:10px"> <!--div class="btn-group dark round" id="meta-toggle" style="margin-right:10px">
<button class="btn btn-md btn-transparent btn-icon btn-icon" v-on:click="toggle_meta()"> <button class="btn btn-md btn-transparent btn-icon btn-icon" v-on:click="toggle_meta()">
<span class="jewel" style="color: white; background-color: red" v-if="meta_unseen>0">{{meta_unseen}}</span> <span class="jewel" style="color: white; background-color: red" v-if="meta_unseen>0">{{meta_unseen}}</span>
<span class="icon icon-menu"></span> <span class="icon icon-menu"></span>
</button> </button>
</div> </div-->
</div> </div>
</header> </header>
...@@ -98,10 +98,8 @@ ...@@ -98,10 +98,8 @@
<div id="folder-breadcrumb"> <div id="folder-breadcrumb">
<a v-for="item in active_space_path" type="button" class="btn btn-sm btn-transparent" href="/{{item.space_type}}s/{{item._id}}" v-sd-droppable="handle_folder_drop;item"> <span v-for="item in active_space_path" class="btn btn-sm btn-transparent" v-sd-droppable="handle_folder_drop;item">
<span>{{item.name}}</span> <a href="/{{item.space_type}}s/{{item._id}}">{{item.name}}</a>&nbsp; ▶</span>
<span class="seperator">/</span>
</a>
<a v-if="(active_space_role != 'admin')" type="button" class="btn btn-sm btn-transparent"> <a v-if="(active_space_role != 'admin')" type="button" class="btn btn-sm btn-transparent">
<span>{{active_folder.name}}</span> <span>{{active_folder.name}}</span>
......
views/partials/login.html
View file @ 80f9b0d9
<header id="landing-header" class="header" v-cloak v-if="(active_view == 'login' || active_view == 'signup' || active_view == 'password-reset' || active_view == 'password-confirm')"> <header id="landing-header" class="header" v-cloak v-if="(active_view == 'login' || active_view == 'signup' || active_view == 'password-reset' || active_view == 'password-confirm')">
<div class="header-left"> <div class="header-left">
<a class="btn btn-transparent btn-nude" href="/"><img src="/images/sd5-logo.svg" width="190"></a> <a class="btn btn-transparent btn-nude" href="/"><img src="/images/sd6-logo-black.svg" width="190"></a>
</div> </div>
<div class="header-right pull-right"> <div class="header-right pull-right">
<span class="btn-group dark round"> <a v-if="active_view != 'login'" class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a>
{% if (locale != "de") %}<a href="/t/de?r={{active_view}}" class="btn btn-transparent btn-md">Deutsch</a>{% endif %} <a v-if="active_view != 'signup'" class="btn btn-md btn-dark btn-round" href="/signup">[[__("signup")]]</a>
{% if (locale != "en") %}<a href="/t/en?r={{active_view}}" class="btn btn-transparent btn-md">English</a>{% endif %}
{% if (locale != "fr") %}<a href="/t/fr?r={{active_view}}" class="btn btn-transparent btn-md">Français</a>{% endif %}
</span>
<a class="btn btn-md btn-dark btn-round" href="/login">[[__("login")]]</a>
<a class="btn btn-md btn-blue btn-round" href="/signup">[[__("signup")]]</a>
</div> </div>
</header> </header>
...@@ -23,7 +17,7 @@ ...@@ -23,7 +17,7 @@
<div id="login" v-bind:class="{active : active_view == 'login'}"> <div id="login" v-bind:class="{active : active_view == 'login'}">
<div class="content"> <div class="content">
<form v-on:submit="login_submit(user_forms_email, login_password, $event)"> <form v-on:submit="login_submit(user_forms_email, login_password, $event)">
<h4>[[__("login")]]</h4> <h3>Login</h3>
<div class="tight"> <div class="tight">
<div class="form-group"> <div class="form-group">
...@@ -34,16 +28,15 @@ ...@@ -34,16 +28,15 @@
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary btn-block"> <button type="submit" class="btn btn-dark btn-block">
<span v-show="!loading_user">[[__("login")]]</span> <span v-show="!loading_user">[[__("login")]]</span>
<span v-show="loading_user">[[__("logging_in")]]</span> <span v-show="loading_user">[[__("logging_in")]]</span>
</button> </button>
<div class="center alert alert-danger" v-if="login_error">{{login_error}}</div> <div class="center alert alert-danger" v-if="login_error">{{login_error}}</div>
<div class="pull-right"> <div style="margin-top:2em">
<a class="btn btn-xs btn-darken" href="/signup">[[__("signup")]]</a>&nbsp; <a href="/password-reset">Forgot Password</a>
<a class="btn btn-xs btn-darken" href="/password-reset">[[__("reset_password")]]</a>
</div> </div>
</form> </form>
</div> </div>
...@@ -51,7 +44,7 @@ ...@@ -51,7 +44,7 @@
<div id="signup" v-bind:class="{active : active_view == 'signup'}"> <div id="signup" v-bind:class="{active : active_view == 'signup'}">
<div class="content"> <div class="content">
<form v-on:submit="signup_submit($event, user_forms_name, user_forms_email, signup_password, signup_password_confirmation)"> <form v-on:submit="signup_submit($event, user_forms_name, user_forms_email, signup_password, signup_password_confirmation, signup_invite_code)">
<h4>[[__("signup")]]</h4> <h4>[[__("signup")]]</h4>
<div class="tight"> <div class="tight">
...@@ -75,19 +68,22 @@ ...@@ -75,19 +68,22 @@
<div class="form-group"> <div class="form-group">
<input class="input" id="user-password-confirmation" required type="password" v-model="signup_password_confirmation" placeholder="[[__("password_confirmation")]]"> <input class="input" id="user-password-confirmation" required type="password" v-model="signup_password_confirmation" placeholder="[[__("password_confirmation")]]">
</div> </div>
<div class="form-group">
<input class="input" id="invite-code" required type="text" v-model="signup_invite_code" placeholder="Invite Code">
</div>
</div> </div>
<div style="margin-top: -7px; margin-bottom: 7px;"><small>By signing up you agree to our <a href="/terms" target="_blank">TOS</a> and <a href="/privacy" target="_blank">Privacy Policy.</a></small><br/> <!--div style="margin-top: -7px; margin-bottom: 7px;"><small>By signing up you agree to our <a href="/terms" target="_blank">TOS</a> and <a href="/privacy" target="_blank">Privacy Policy.</a></small><br/>
</div> </div-->
<button class="btn btn-primary btn-block"> <button class="btn btn-dark btn-block">
<span v-if="!creating_user">[[__("signup")]]</span> <span v-if="!creating_user">[[__("signup")]]</span>
<span v-if="creating_user">[[__("signing_up")]]</span> <span v-if="creating_user">[[__("signing_up")]]</span>
</button> </button>
<div class="center alert alert-danger" style="width:100%;" v-if="signup_error">{{signup_error}}</div> <div class="center alert alert-danger" style="width:100%;" v-if="signup_error">{{signup_error}}</div>
<a class="btn btn-link btn-block" href="/login" style="margin-top: 20px">[[__("login")]]</a>
</form> </form>
</div> </div>
</div> </div>
...@@ -102,7 +98,7 @@ ...@@ -102,7 +98,7 @@
</div> </div>
</div> </div>
<div class="text-center alert alert-danger" v-if="password_reset_error">{{password_reset_error}}</div> <div class="text-center alert alert-danger" v-if="password_reset_error">{{password_reset_error}}</div>
<button class="btn btn-primary btn-block" v-on:click="password_reset_submit($event, reset_email)">[[__("reset_password")]]</button> <button class="btn btn-dark btn-block" v-on:click="password_reset_submit($event, reset_email)">[[__("reset_password")]]</button>
</form> </form>
</div> </div>
<div class="content" v-if="password_reset_send==true"> <div class="content" v-if="password_reset_send==true">
...@@ -127,7 +123,7 @@ ...@@ -127,7 +123,7 @@
</div> </div>
<div class="text-center alert alert-danger" v-if="password_reset_confirm_error">{{password_reset_confirm_error}}</div> <div class="text-center alert alert-danger" v-if="password_reset_confirm_error">{{password_reset_confirm_error}}</div>
<button class="btn btn-primary btn-block" v-on:click="password_reset_confirm($event, signup_password, signup_password_confirmation)">[[__("save")]]</button> <button class="btn btn-dark btn-block" v-on:click="password_reset_confirm($event, signup_password, signup_password_confirmation)">[[__("save")]]</button>
</form> </form>
</div> </div>
</div> </div>
......
views/partials/space.html
View file @ 80f9b0d9
...@@ -43,9 +43,8 @@ ...@@ -43,9 +43,8 @@
<div class="space-empty" v-cloak v-if="active_view == 'space' && !present_mode && active_space_artifacts.length == 0"> <div class="space-empty" v-cloak v-if="active_view == 'space' && !present_mode && active_space_artifacts.length == 0">
<div class="table-fake"> <div class="table-fake">
<div class="cell"> <div class="cell">
<p>Click anywhere to add content.<br> <p>Use the toolbar to add content.<br>
You can also drop images, sounds and video<br> You can also drop images or sound and video files.</p>
or use copy and paste.</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -127,7 +126,6 @@ ...@@ -127,7 +126,6 @@
<a class="link btn btn-round btn-primary btn-sm" v-if="a.view.link" v-bind:href="a.view.link" target="_blank">{{a.view.link_caption}}</a> <a class="link btn btn-round btn-primary btn-sm" v-if="a.view.link" v-bind:href="a.view.link" target="_blank">{{a.view.link_caption}}</a>
</span> </span>
<div class="btn btn-xs btn-icon btn-round btn-primary edit" v-show="editing_artifact_id!=a._id && is_selected(a)" v-on:touchstart="delayed_edit_artifact($event)"><span class="icon icon-pencil" v-on:click="toggle_selected_artifact_editing(true)" v-on:"touchstart:delayed_edit_artifact($event)"></span></div>
<input v-show="is_selected(a)" type="text" id="ios-focuser-{{a._id}}" class="ios-focuser"> <input v-show="is_selected(a)" type="text" id="ios-focuser-{{a._id}}" class="ios-focuser">
</div> </div>
...@@ -338,7 +336,7 @@ ...@@ -338,7 +336,7 @@
<div class="window" v-bind:style="{left: ''+(scroll_left/minimap_scale) + 'px', top: ''+(scroll_top/minimap_scale)+ 'px', width: ''+(window_width/minimap_scale)+ 'px', height: ''+(window_height/minimap_scale) + 'px'}"></div> <div class="window" v-bind:style="{left: ''+(scroll_left/minimap_scale) + 'px', top: ''+(scroll_top/minimap_scale)+ 'px', width: ''+(window_width/minimap_scale)+ 'px', height: ''+(window_height/minimap_scale) + 'px'}"></div>
</div--> </div-->
<div class="btn-group light zoom-bar" style="position:absolute;bottom:20px;right:20px;"> <div class="btn-group light zoom-bar">
<button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()"> <button class="btn btn-icon btn-md btn-white" v-on:click="zoom_in()">
<span class="icon icon-plus"></span> <span class="icon icon-plus"></span>
</button> </button>
......
views/partials/tool/layout.html
View file @ 80f9b0d9
<div id="layout" class="relative"> <div id="layout" class="relative">
<div class="dialog-section no-p-b"> <div class="dialog-section">
<div class=""> <div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_stack_top()"> <button class="btn btn-transparent btn-icon" v-on:click="layout_stack_top()">
<span class="icon icon-stack-3d-top"></span> <span class="icon icon-stack-3d-top"></span>
</button> </button>
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span class="icon icon-align-bottom"></span> <span class="icon icon-align-bottom"></span>
</button> </button>
</div> </div>
<div class=""> <div class="btn-group">
<button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()"> <button class="btn btn-transparent btn-icon" v-on:click="layout_align_center()">
<span class="icon icon-align-center-horizontal"></span> <span class="icon icon-align-center-horizontal"></span>
</button> </button>
......
views/partials/tool/shapes.html
View file @ 80f9b0d9
<h4 class="dialog-title">[[__("tool_shape")]]</h4> <h4 class="dialog-title">[[__("tool_shape")]]</h4>
<div id="shapes"> <div id="shapes">
<div class="dialog-section no-p-h" style="white-space: normal;"> <div class="dialog-section">
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)"> <div class="btn-group">
<span class="icon icon-shape-circle"></span> <button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('ellipse',$event)">
<span class="icon-label">[[__("tool_circle")]]</span> <span class="icon icon-shape-circle"></span>
</button> <span class="icon-label">[[__("tool_circle")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
<span class="icon icon-shape-hexagon"></span>
<span class="icon-label">[[__("tool_hexagon")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_square")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
<span class="icon icon-shape-bubble"></span>
<span class="icon-label">[[__("tool_bubble")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
<span class="icon icon-shape-cloud"></span>
<span class="icon-label">[[__("tool_cloud")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
<span class="icon icon-shape-burst"></span>
<span class="icon-label">[[__("tool_burst")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
<span class="icon icon-shape-star"></span>
<span class="icon-label">[[__("tool_star")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
<span class="icon icon-shape-heart"></span>
<span class="icon-label">[[__("tool_heart")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('hexagon',$event)">
<span class="icon icon-shape-hexagon"></span>
<span class="icon-label">[[__("tool_hexagon")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('square',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_square")]]</span>
</button>
<!--button class="btn btn-icon-labeled btn-transparent rot45" v-on:click="add_shape('diamond',$event)">
<span class="icon icon-shape-square"></span>
<span class="icon-label">[[__("tool_diamond")]]</span>
</button-->
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('speechbubble',$event)">
<span class="icon icon-shape-bubble"></span>
<span class="icon-label">[[__("tool_bubble")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('cloud',$event)">
<span class="icon icon-shape-cloud"></span>
<span class="icon-label">[[__("tool_cloud")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('burst',$event)">
<span class="icon icon-shape-burst"></span>
<span class="icon-label">[[__("tool_burst")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('star',$event)">
<span class="icon icon-shape-star"></span>
<span class="icon-label">[[__("tool_star")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="add_shape('heart',$event)">
<span class="icon icon-shape-heart"></span>
<span class="icon-label">[[__("tool_heart")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()">
<span class="icon icon-tool-arrow"></span>
<span class="icon-label">[[__("tool_arrow")]]</span>
</button>
<button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_line()">
<span class="icon icon-tool-line"></span>
<span class="icon-label">[[__("tool_line")]]</span>
</button>
</div>
</div>
<!--
<div class="dialog-section no-p">
<div class="btn-cluster">
<button class="btn btn-transparent text-center"> Upload </button>
<button class="btn btn-transparent text-center" v-on:click="start_drawing_scribble()"> Draw </button>
</div> </div>
</div>
</div> </div>
-->
views/partials/tool/toolbar-elements.html
View file @ 80f9b0d9
...@@ -8,12 +8,12 @@ ...@@ -8,12 +8,12 @@
<span class="icon icon-folder"></span> <span class="icon icon-folder"></span>
</a> </a>
<a class="btn btn-icon btn-transparent" <a class="btn btn-icon btn-dark"
title="Parent Folder" title="Parent Folder"
href="/folders/{{active_space.parent_space_id}}" href="/folders/{{active_space.parent_space_id}}"
v-if="(active_space.parent_space_id && !guest_nickname)"> v-if="(active_space.parent_space_id && !guest_nickname)">
<span class="icon icon-folder"></span> <span class="icon icon-sd6 icon-svg"></span>
</a> </a>
<button class="btn btn-divider"></button> <button class="btn btn-divider"></button>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="btn-collapse in"> <div class="btn-collapse in">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()"> <button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()">
<span class="icon icon-upload"></span> <span class="icon icon-upload"></span>
<span class="icon-label" >[[__("tool_upload")]]</span> <span class="icon-label" >Media</span>
</button> </button>
</div> </div>
</div> </div>
......
views/partials/tool/toolbar-object.html
View file @ 80f9b0d9
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="btn-collapse in"> <div class="btn-collapse in">
<button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}"> <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}">
<span class="icon icon-text-styles"></span> <span class="icon icon-text-styles"></span>
<span class="icon-label">styles</span> <span class="icon-label">Styles</span>
</button> </button>
</div> </div>
......
views/partials/tool/zones.html
View file @ 80f9b0d9
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div id="zones" style="max-height:500px;overflow-y:scroll"> <div id="zones" style="max-height:500px;overflow-y:scroll">
<div class="dialog-section"> <div class="dialog-section">
<p v-if="zones.length<2"> <!--p v-if="zones.length<2">
Turn your Space into a zooming presentation by placing some Zones and switch through them when presenting. Turn your Space into a zooming presentation by placing some Zones and switch through them when presenting.
</p> </p-->
<button v-on:click="add_zone()" class="btn btn-sm btn-primary">[[__("add_zone")]]</button> <button v-on:click="add_zone()" class="btn btn-sm btn-dark">[[__("add_zone")]]</button>
</div> </div>
<div class="dialog-section no-p" v-for="z in zones | orderBy 'order'" style="white-space: nowrap;text-align:left;cursor:pointer" v-on:click="zoom_to_zone(z)"> <div class="dialog-section no-p" v-for="z in zones | orderBy 'order'" style="white-space: nowrap;text-align:left;cursor:pointer" v-on:click="zoom_to_zone(z)">
......
Markdown is supported
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal