New temporary design

core/static/core/temporary_design.scss

@@ -0,0 +1,689 @@
+$first-color: hsl(220, 100%, 50%);
+$second-color: hsl(40, 100%, 50%);
+$primary-color: hsl(219.9, 53.7%, 50%);
+$secondary-color: hsl(40.1, 78.0%, 50%);
+$primary-color-text: hsl(0, 0%, 100%);
+$secondary-color-text: hsla(0, 0%, 0%, 0.87);
+
+$primary-light-color: hsl(219.8, 46.4%, 64.9%);
+$primary-dark-color: hsl(219.8, 46.4%, 35.1%);
+
+$secondary-light-color: hsl(40, 68%, 65%);
+$secondary-dark-color: hsl(40, 68%, 35%);
+
+
+$primary-neutral-color: hsl(219.6, 20.8%, 50%);
+$primary-neutral-light-color: hsl(219.6, 20.8%, 83%);
+$primary-neutral-dark-color: hsl(219.6, 20.8%, 17%);
+
+$secondary-neutral-color: hsl(40, 57.6%, 50%);
+$secondary-neutral-light-color: hsl(40, 57.6%, 83%);
+$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
+
+$white-color: hsl(219.6, 20.8%, 98%);
+$black-color: hsl(40.0, 0%, 17%);
+
+
+
+
+/*--------------------------------GENERAL------------------------------*/
+
+body {
+  background-color: $primary-neutral-light-color;
+  position: relative;
+  width: 100%;
+  font-family: sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: $primary-dark-color;
+  &:hover {
+    color: $primary-light-color;
+  }
+  &:active {
+    color: $primary-color;
+  }
+}
+
+.ib {
+  display: inline-block;
+  padding: 2px;
+  margin: 2px;
+}
+
+.w_big {
+  width: 75%;
+}
+
+.w_medium {
+  width: 45%;
+}
+
+.w_small {
+  width: 20%;
+}
+
+/*--------------------------------HEADER-------------------------------*/
+
+#logo {
+  margin-left: 5%;
+  display: inline-block;
+}
+
+header {
+  display: block;
+  position: absolute;
+  top: 0px;
+  right: 2%;
+  background-color: $secondary-light-color;
+  margin: 0 10px;
+  padding: 0 10px;
+  border-radius: 0 0 10px 10px;
+  ul {
+    display: inline-block;
+    list-style-type: none;
+    margin: 0px;
+    padding-right: 3px;
+    vertical-align: middle;
+  }
+  a {
+    display: inline-block;
+    color: inherit;
+    text-decoration: none;
+    padding: 1em;
+    &:hover {
+      color: $primary-dark-color;
+    }
+  }
+  form {
+    display: inline-block;
+    padding: 1em;
+    width: 150px;
+  }
+}
+
+#popupheader {
+  width: 88%;
+  margin: 0px auto;
+  padding: 0.3em 1%;
+}
+
+#language_chooser {
+  position: absolute;
+  text-align: center;
+  left: 5px;
+  top: 5px;
+  input {
+    margin: 2px;
+    width: 3em;
+    height: 2em;
+  }
+}
+
+#notif {
+  display: none;
+  position: absolute;
+  background: lightgrey;
+  text-align: center;
+  overflow: scroll;
+  max-height: 400px;
+  li:hover {
+    background: #bcc;
+  }
+}
+
+#alert_box p, #info_box p {
+  margin: 0px;
+  padding: 0px;
+}
+
+#alert_box {
+  font-size: smaller;
+  display: inline-block;
+  border: solid 1px grey;
+  vertical-align: top;
+  padding: 2px;
+  margin: 4px;
+  margin-top: 60px;
+  min-width: 10%;
+  max-width: 30%;
+  min-height: 20px;
+}
+
+#info_box {
+  font-size: smaller;
+  display: inline-block;
+  border: solid 1px $primary-neutral-light-color;
+  vertical-align: top;
+  padding: 2px;
+  margin: 4px;
+  margin-top: 60px;
+  min-width: 10%;
+  max-width: 30%;
+  min-height: 20px;
+  background: $white-color;
+}
+
+#alert_box {
+  background: gold;
+}
+
+/*---------------------------------NAV---------------------------------*/
+
+nav {
+  display: block;
+  width: 90%;
+  margin: 0px auto;
+  background: $primary-color;
+  color: $white-color;
+  a {
+    color: $white-color;
+    font-style: normal;
+    font-weight: bolder;
+    text-decoration: none;
+    display: inline-block;
+    padding: 20px;
+    &:hover {
+      background: $primary-dark-color;
+      color: $white-color;
+    }
+  }
+}
+
+/*--------------------------------CONTENT------------------------------*/
+
+#quick_notif {
+  width: 90%;
+  margin: 0px auto;
+  list-style-type: none;
+  background: $primary-neutral-light-color;
+  li {
+    padding: 10px;
+  }
+}
+
+#content {
+  width: 88%;
+  margin: 0px auto;
+  padding: 1em 1%;
+  background: $white-color;
+  overflow: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  margin-top: 0.5em;
+}
+
+h1 {
+  font-size: 160%;
+  margin-left: 50px;
+}
+
+h2 {
+  font-size: 150%;
+  margin-left: 40px;
+}
+
+h3 {
+  font-size: 140%;
+  margin-left: 30px;
+}
+
+h4 {
+  font-size: 130%;
+  margin-left: 20px;
+}
+
+h5 {
+  font-size: 120%;
+  margin-left: 10px;
+}
+
+h6 {
+  font-size: 110%;
+  margin-left: 0px;
+}
+
+p, pre {
+  margin-top: 1em;
+  margin-left: 0px;
+}
+
+ul, ol {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  list-style-type: disc;
+  margin-left: 25px;
+}
+
+code {
+  font-family: monospace;
+}
+
+blockquote {
+  margin: 10px;
+  padding: 5px;
+  border: solid 1px $black-color;
+}
+
+.edit-bar {
+  display: block;
+  margin: 4px;
+  a {
+    display: inline-block;
+    margin: 4px;
+  }
+}
+
+.important {
+  font-size: 1.2em;
+  font-weight: bold;
+  color: red;
+}
+
+table {
+  width: 100%;
+  font-size: 0.90em;
+}
+
+td {
+  padding: 4px;
+  margin: 5px;
+  border: solid 1px $primary-neutral-color;
+  border-collapse: collapse;
+  vertical-align: top;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  > ul {
+    margin-top: 0px;
+  }
+}
+
+thead {
+  font-weight: bold;
+}
+
+tbody > tr {
+  &:nth-child(even) {
+    background: $primary-neutral-light-color;
+  }
+  &:hover {
+    background: $secondary-neutral-light-color;
+    width: 100%;
+  }
+}
+
+em {
+  font-style: italic;
+}
+
+.highlight {
+  background: $second-color;
+  font-weight: bold;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.tool-bar {
+  overflow: auto;
+  padding: 4px;
+}
+
+.tools {
+  float: right;
+  border: 1px solid $primary-neutral-light-color;
+  a {
+    padding: 10px;
+    display: inline-block;
+  }
+}
+
+.selected_tab {
+  background: $primary-neutral-light-color;
+}
+
+#basket {
+  width: 40%;
+  background: $primary-neutral-light-color;
+  float: right;
+  padding: 10px;
+}
+
+#products {
+  width: 90%;
+  margin: 0px auto;
+  overflow: auto;
+}
+
+#bar_ui {
+  float: left;
+  min-width: 57%;
+}
+
+#user_info_container {}
+
+#user_info {
+  float: right;
+  padding: 5px;
+  width: 40%;
+  margin: 0px auto;
+  background: $secondary-neutral-light-color;
+}
+
+/*-----------------------------USER PROFILE----------------------------*/
+
+#user_profile_container {
+  width: 80%;
+  margin: 0px auto;
+}
+
+#user_profile {
+  width: 100%;
+  margin: 0px auto;
+  padding: 10px;
+  overflow: auto;
+  h4 {
+    border-bottom: 1px solid $primary-light-color;
+    max-width: 60%;
+  }
+  #left_column {
+    width: 59%;
+  }
+  #right_column {
+    width: 40%;
+    float: right;
+    font-style: italic;
+  }
+  #pictures {
+    max-width: 250px;
+    max-height: 300px;
+    margin: 0px auto;
+  }
+  #nickname {
+    font-style: italic;
+  }
+  #pictures img {
+    max-width: 96%;
+    max-height: 96%;
+  }
+  .promo_pict {
+    height: 45px;
+  }
+}
+
+.mini_profile_link {
+  display: block;
+  text-decoration: none;
+  span {
+    display: inline-block;
+    width: 50px;
+    vertical-align: middle;
+  }
+  em {
+    vertical-align: middle;
+  }
+  img {
+    max-width: 40px;
+    max-height: 60px;
+    margin: 2px auto;
+    display: block;
+  }
+}
+
+#notifications li {
+  padding: 5px;
+  margin: 2px;
+  list-style: none;
+}
+
+#moderation {
+  div {
+    margin: 2px;
+    padding: 2px;
+    border: solid 1px red;
+    text-align: center;
+  }
+  img {
+    width: 500px;
+  }
+}
+
+#pict {
+  display: inline-block;
+  width: 80%;
+  background: #333;
+  border: solid #333 2px;
+}
+
+/*---------------------------------PAGE--------------------------------*/
+
+.page_content {
+  display: block;
+  margin: 10px;
+  padding: 10px;
+  background: $white-color;
+  code {
+    font-family: monospace;
+    color: $white-color;
+    background: $black-color;
+    display: inline-block;
+    padding: 4px;
+    line-height: 120%;
+  }
+}
+
+textarea {
+  white-space: pre;
+  width: 98%;
+  margin-top: 10px;
+}
+
+/*---------------------------LAUNDERETTE-------------------------------*/
+
+#token_form label {
+  display: inline;
+}
+
+/*------------------------------FORUM----------------------------------*/
+
+.topic a, .forum a, .category a {
+  color: $black-color;
+}
+
+.topic a:hover, .forum a:hover, .category a:hover {
+  color: #424242;
+  text-decoration: underline;
+}
+
+.topic {
+  border: solid $secondary-color 1px;
+  padding: 2px;
+  margin: 2px;
+}
+
+.forum {
+  background: $secondary-light-color;
+  padding: 2px;
+  margin: 2px;
+}
+
+.category {
+  background: $second-color;
+}
+
+.message {
+  padding: 2px;
+  margin: 2px;
+  background: $white-color;
+  &:nth-child(odd) {
+    background: $secondary-neutral-light-color;
+  }
+  h5 {
+    font-size: 100%;
+  }
+  &.unread {
+    background: #d8e7f3;
+  }
+}
+
+.msg_author.deleted {
+  background: #ffcfcf;
+}
+
+.msg_content {
+  &.deleted {
+    background: #ffefef;
+  }
+  display: inline-block;
+  width: 80%;
+  vertical-align: top;
+}
+
+.msg_author {
+  display: inline-block;
+  width: 19%;
+  text-align: center;
+  background: $secondary-neutral-light-color;
+  img {
+    max-width: 70%;
+    margin: 0px auto;
+  }
+}
+
+.msg_meta {
+  font-size: small;
+  list-style-type: none;
+  li {
+    padding: 2px;
+    margin: 2px;
+  }
+}
+
+.forum_signature {
+  color: #C0C0C0;
+  border-top: 1px solid #C0C0C0;
+  a {
+    color: #C0C0C0;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/*------------------------------SAS------------------------------------*/
+
+.album {
+  display: inline-block;
+  border: solid 1px $black-color;
+  text-align: center;
+  padding: 5px;
+  width: 200px;
+  height: 140px;
+  background: #eee;
+  box-shadow: black 2px 2px 10px;
+  margin: 10px;
+  vertical-align: top;
+  img {
+    max-height: 100px;
+  }
+}
+
+.picture {
+  display: inline-block;
+  border: solid 1px $black-color;
+  width: 150px;
+  height: 100px;
+  margin: 5px;
+  background: #eee;
+  box-shadow: grey 2px 2px 5px;
+  padding: 2px;
+  vertical-align: middle;
+  img {
+    max-width: 100%;
+    max-height: 100px;
+    display: block;
+    margin: auto;
+  }
+}
+
+.not_moderated {
+  border: solid 1px red;
+  box-shadow: red 2px 2px 10px;
+}
+
+/*--------------------------------FOOTER-------------------------------*/
+
+footer {
+  text-align: center;
+  div {
+    margin-top: 25px;
+    margin-bottom: 15px;
+  }
+  a {
+    margin: 1px 20px;
+  }
+}
+
+/*---------------------------------FORMS-------------------------------*/
+
+form {
+  margin: 0px auto;
+  width: 60%;
+}
+
+label {
+  display: block;
+}
+
+.choose_file_widget {
+  display: none;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+  bottom: 0px;
+  position: absolute;
+  width: 97%;
+}
+
+#user_edit {
+  * {
+    text-align: center;
+  }
+  img {
+    width: 100px;
+  }
+}
+
+#cash_summary_form label, .inline {
+  display: inline;
+}
+
+.form_button {
+  width: 150px;
+  height: 120px;
+  padding: 2px;
+  display: inline-block;
+  font-size: 0.8em;
+  span {
+    width: 70px;
+    float: right;
+  }
+  img {
+    max-width: 50px;
+    max-height: 50px;
+    float: left;
+  }
+  strong {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+  button {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+}

core/templates/core/base.jinja

@@ -8,7 +8,7 @@
         <link rel="stylesheet" href="{{ static('core/jquery.datetimepicker.min.css') }}">
         <link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
         <link rel="stylesheet" href="{{ static('ajax_select/css/ajax_select.css') }}">
-        <link rel="stylesheet" href="{{ static('core/style.css') }}">
+        <link href="{% sass_src 'core/temporary_design.scss' %}" rel="stylesheet" type="text/css" />
         {% endblock %}
     </head>
 

requirements.txt

@@ -12,5 +12,7 @@ reportlab
 django-haystack
 whoosh
 django-debug-toolbar
+libsass
+django-compressor
+django-sass-processor
 # mysqlclient
-

sith/settings.py

@@ -72,6 +72,7 @@ INSTALLED_APPS = (
     'rest_framework',
     'ajax_select',
     'haystack',
+    'sass_processor',
     'core',
     'club',
     'subscription',
@@ -133,6 +134,7 @@ TEMPLATES = [
                 "django_jinja.builtins.extensions.UrlsExtension",
                 "django_jinja.builtins.extensions.StaticFilesExtension",
                 "django_jinja.builtins.extensions.DjangoFiltersExtension",
+                "sass_processor.jinja2.ext.SassSrc",
             ],
             "filters": {
                 "markdown": "core.templatetags.renderer.markdown",
@@ -182,6 +184,12 @@ HAYSTACK_CONNECTIONS = {
 
 HAYSTACK_SIGNAL_PROCESSOR = 'core.search_indexes.UserOnlySignalProcessor'
 
+SASS_PRECISION = 8
+
+SASS_OUTPUT_STYLE = 'compact'
+
+SASS_TEMPLATE_EXTS = ['.html','.jinja']
+
 WSGI_APPLICATION = 'sith.wsgi.application'
 
 
@@ -230,6 +238,13 @@ MEDIA_URL = '/data/'
 STATIC_URL = '/static/'
 STATIC_ROOT = './static/'
 
+# Static files finders which allow to see static folder in all apps
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'sass_processor.finders.CssFinder',
+]
+
 # Auth configuration
 AUTH_USER_MODEL = 'core.User'
 AUTH_ANONYMOUS_MODEL = 'core.models.AnonymousUser'