aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/sass/_forms.scss13
-rw-r--r--design/sass/_global.scss11
-rw-r--r--design/sass/_header.scss43
-rw-r--r--design/sass/_notes.scss80
-rw-r--r--design/templates/accounts/profile.html2
-rw-r--r--design/templates/base.html45
6 files changed, 164 insertions, 30 deletions
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 5923e1f..cce0e0f 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -162,3 +162,16 @@ table {
border-radius: 4px;
padding: 6px;
}
+select {
+ display: inline;
+ @include fontsize(13);
+ color: $body_font_color;
+ border: 1px solid lighten($body_font_light, 15);
+ padding: 5px;
+ background: white;
+ border-radius: 4px;
+}
+#id_tags {
+ @include fontsize(13);
+ padding: 8px;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index c242ace..9ef2e99 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -201,6 +201,17 @@ h3 {
.vertical li {
display: block;
}
+.single-col {
+ display: block;
+ @include constrain_narrow;
+}
+.wide{
+ display: block;
+ @include constrain_wide;
+}
+.small > * {
+ @include fontsize(14);
+}
//************** other global classes ************************
.sans {
@include generic_sans;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 487f1fc..29e1ef2 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -16,6 +16,9 @@ header {
margin-top: 4px;
float: right;
}
+ .nologin {
+ margin-top: -2px;
+ }
}
nav {
@include fancy-sans-bold;
@@ -59,7 +62,7 @@ nav {
position: absolute;
z-index: 10;
margin-top: 4px;
- margin-left: 2rem;
+ margin-left: 4rem;
background: #fff;
color: #60516E;
padding: 10px;
@@ -96,5 +99,41 @@ nav {
}
}
#user-menu {
- margin-left: 4rem;
+ margin-left: 8rem;
+}
+
+.circle{
+ width: 26px;
+ height: 20px;
+ border-radius: 100%;
+ position: relative;
+ margin: -2px 8px 0 0;
+ display: inline-block;
+ vertical-align: middle;
+ background: $link_color;
+ text-indent: -3000em;
+}
+.circle:hover{
+ background: $link_color;
+}
+.circle:active{
+ background: $link_color;
+}
+.circle:before,
+.circle:after{
+ content:'';position:absolute;top:0;left:0;right:0;bottom:0;
+}
+/* PLUS */
+.circle.plus:before,
+.circle.plus:after {
+ background: white;
+}
+.circle.plus:before{
+ width: 2px;
+ margin: 10px auto;
+}
+.circle.plus:after{
+ margin: auto 10px;
+ height: 2px;
+ box-shadow: none;
}
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index cd10e39..caec25b 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -46,6 +46,10 @@ main {
order: 3;
min-width: 320px;
}
+.balance-container-left {
+ order: 1;
+ min-width: 320px;
+}
.list-notebook {
}
@@ -62,32 +66,53 @@ main {
list-style-type: none;
li {
@include fontsize(13);
+ padding: 8px 0 12px;
min-height: 4.5rem;
box-shadow: 0 -1px 0 #e7e2ee inset;
margin: 0;
padding: 6px 12px;
&:hover {
- background: #f1f1f1;
+ background: #f7f7f7;
}
a {
- color: lighten($body_font_color, 15);
+ color: lighten($body_font_color, 5);
text-decoration: none;
}
}
h4 {
@include fontsize(16);
margin: 0;
- padding: 8px 0 8px 6px;
+ padding-bottom: 8px;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
+ color: $body_font_color;
+ }
+ .notebook {
+ padding-right: 8px;
+ &:after {
+ display: inline-block;
+ position: relative;
+ top: 3px;
+ left: 3px;
+ content: " ";
+ height: 14px;
+ width: 1px;
+ background-color: $body_font_light;
+ }
}
.note-preview {
- padding-left: 6px;
margin-bottom: 16px;
margin-right: 6px;
}
}
+
+.color-box {
+ display: inline-block;
+ width: 9px;
+ height: 9px;
+ margin-right: 4px;
+}
.note-title {
@include fontsize(26);
}
@@ -104,6 +129,7 @@ main {
@include fancy-sans;
@include fontsize(12);
margin-bottom: 0;
+ margin-top: 0;
text-transform: uppercase;
}
.note-url {
@@ -122,8 +148,6 @@ main {
float: left;
width: 50%;
.label {
- text-transform: uppercase;
- @include fontsize(11);
color: $body_font_light;
margin-right: 4px;
}
@@ -143,6 +167,17 @@ main {
color: darken($body_font_light, 25);
}
}
+ .notebook {
+ width: auto;
+ display: inline;
+ margin-right: 1rem;
+ }
+ .tags {
+ display: flex;
+ input {
+ width: 200%;
+ }
+ }
}
.notebook {
display: block;
@@ -183,7 +218,38 @@ main {
.active {
display: block !important;
}
-
+.notebook-colored {
+ border-left: 3px solid #fff;
+}
+.notebook-title {
+ @include fontsize(24);
+ @include fancy-sans;
+}
+.flex-wrapper {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ @extend %clearfix;
+}
+#nb-edit-form {
+ width: 100%;
+}
+.color-picker-fieldset {
+ display: block;
+ margin-right: .5rem;
+ width: 20px;
+ height: 20px;
+ border-radius: 4px;
+ border: 1px solid $body_font_light;
+ #id_color_rgb {
+ display: block;
+ text-indent: -1000em;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: pointer;
+ }
+}
/*
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
diff --git a/design/templates/accounts/profile.html b/design/templates/accounts/profile.html
index c47e6c6..e8ab65e 100644
--- a/design/templates/accounts/profile.html
+++ b/design/templates/accounts/profile.html
@@ -1,6 +1,6 @@
{% extends 'base.html' %}
{% block content %}
-<main>
+<main class="single-col">
<h1>Account Settings</h1>
<table>
<tbody>
diff --git a/design/templates/base.html b/design/templates/base.html
index bb54717..50749cb 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -4,49 +4,55 @@
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"><!--<![endif]-->
<head>
-<title>Note</title>
-<meta name="viewport" content="width=device-width">
-<meta name="description" content="Note taking for writers">
-<meta property="og:description" content="Note taking for writers">
-<meta property="og:site_name" content="Notes">
-<meta property="og:image" content="">
-<link rel="stylesheet" href="/media/screenv1.css?{%now "u"%}" type="text/css">
-{% block extrastyles %}{%endblock%}
-<link rel="icon" type="image/png" href="">
-<!--<link rel="manifest" href="/webmanifest.json">-->
-<link rel="apple-touch-icon" sizes="256x256" href="">
+ <title>{% block pagetitle %}{% endblock %}TKNotes</title>
+ <meta name="viewport" content="width=device-width">
+ <meta name="description" content="TKNote taking for writers">
+ <meta property="og:description" content="TkNote taking for writers">
+ <meta property="og:site_name" content="TKNotes">
+ <meta property="og:image" content="">
+ <link rel="stylesheet" href="/media/screenv1.css?{%now "u"%}" type="text/css">
+ {% block extrastyles %}{%endblock%}
+ <link rel="icon" type="image/png" href="">
+ <!--<link rel="manifest" href="/webmanifest.json">-->
+ <link rel="apple-touch-icon" sizes="256x256" href="">
+ <script async src="/media/js/main.min.js?{%now "u"%}"></script>
</head>
<body class="{% block bodyclass %}{% endblock %}">
<div class="head-wrapper">
<header>
<nav class="left">
<ul>{% if not request.user.is_anonymous %}
- <li><a href="{%url 'notes:note-list' user.username %}">Notes</a></li>
- <li><a id="notebook-menu-link" href="{%url 'notes:notebook-list' user.username %}" title="view notebooks">Notebooks</a>
+ <li><a class="circle plus" href="{%url 'notes:create' %}" title="Add a new note">New</a></li>
+ <li><a href="{%url 'notes:list' %}" title="View all your notes">Notes</a></li>
+ <li><a id="notebook-menu-link" href="{%url 'notebooks:list' %}" title="view your notebooks">Notebooks</a>
<div id="notebooks-menu" class="dropmenu">
- <ul id="notebooks-menu-list" class="list-style-none vertical">{% for obj in user.profile.get_notebook_list %}
- <li><a href="{{obj.get_absolute_url}}">{{obj}}</a></li>
- {% endfor %}</ul>
+ <ul id="notebooks-menu-list" class="list-style-none vertical">
+ {% for object in user.profile.get_notebook_list %}
+ <li><a href="{{object.get_absolute_url}}" title="view all notes in the notebook {{object.name}}"><span class="color-box" style="background-color: {{object.color_rgb}}"></span>{{object}}</a>
+ {% endfor %}
+ <li class="menu-divider">
+ <a href="{% url 'notebooks:list' %}">Edit/Add Notebook</a>
+ </li></ul>
</div>
</li>{%else%}
<li><a href="/" title="">Home</a></li>{%endif%}
</ul>
</nav>
<div class="logo"></div>
- <nav class="right">
+ <nav class="right {% if request.user.is_anonymous %}nologin{% endif %}">
<ul>
+ <li><a href="{% url 'forum:topic-list' %}" title="View the TKNote Forum">Forum</a></li>
<li><a href="{% url 'pages' slug='tour' %}" title="">Tour</a></li>
<li><a href="{% url 'pages' slug='howto' %}" title="">How to</a></li>{% if not request.user.is_anonymous %}
<li><a id="account-menu" href="{% url 'settings' %}" title="">Account</a>
<div id="user-menu" class="dropmenu" tabindex="-1">
<ul id="user-menu-list" class="list-style-none vertical">
- <li><a href="/users/luxagraf/" class="">Your Notes</a></li>
<li><a href="/settings/" class="">Account settings</a></li>
<li><a href="/plans/" class="">Subscription plans</a></li>
</ul>
<ul class="menu-divider list-style-none">
<li>
- <form action="/logout/" method="post">
+ <form action="/logout/" method="post">{% csrf_token %}
<input type="hidden" name="a" value="3">
<button type="submit" value="Log out" class="btn-link">Log out</button>
</form>
@@ -85,7 +91,6 @@
</footer>
{% block extra %}
{%endblock%}
-<script async src="/media/js/package.min.js"></script>
{% block jsinclude %}{%endblock%}
<script>
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-02-23 21:15:28 +0000