Merge branch 'feature/template' into 'master'

First version of template

A preliminary version of with minimal configuration of the menu and the content pages.
Please extend the template when necessary.

See merge request !7

.gitignore

@@ -10,6 +10,7 @@
 db.sqlite3
 
 website/media/
+website/static/
 
 # Ignore local settings
 website/thaliawebsite/settings/localsettings.py

README.md

@@ -8,7 +8,8 @@ New new Thalia website, now with extra Django.
 Getting started
 ---------------
 
-0. Get at least Python 3.4 and install the Pillow requirements as per below
+0. Get at least Python 3.4 and install the Pillow requirements as per below.
+   Also make sure that you have `lessc` installed (see below).
 1. Clone this repository
 2. Run `source ./source_me.sh` (or use your own favourite virtualenv solution)
 3. Run `pip install -r requirements.txt`
@@ -37,7 +38,12 @@ For Ubuntu 16.04, use:
 
     apt-get install python-dev gettext gcc build-essential libtiff5-dev libjpeg62-turbo-dev zlib1g-dev libfreetype6-dev liblcms2-dev libwebp-dev
 
-For other operating systems, see the (Pillow Documentation)[pillow-install].
+For other operating systems, see the [Pillow Documentation][pillow-install].
 
 
 [pillow-install]: https://pillow.readthedocs.io/en/latest/installation.html
+
+NodeJS dependencies
+-----------------------
+1. `lessc`:
+   * For Ubuntu  use: `apt-get install node-less`

requirements.txt

 Django==1.10b1
 django-localflavor==1.3
 Pillow
+django-static-precompiler>=1.4,<2

website/thaliawebsite/menus.py

+from django.utils.translation import ugettext as _
+
+main = [
+    {'title': _('Home'), 'name': 'index'},
+    {'title': _('Association'), 'name': '#', 'submenu': [
+        {'title': _('Board'), 'name': '#'},
+        {'title': _('Committees'), 'name': '#'},
+        {'title': _('Members'), 'name': '#'},
+        {'title': _('Documents'), 'name': '#'},
+        {'title': _('Members'), 'name': '#'},
+        {'title': _('Sister Associations'), 'name': '#'},
+        {'title': _('Become Member'), 'name': '#'},
+        {'title': _('Thabloid'), 'name': '#'},
+    ]},
+    {'title': _('For Members'), 'name': '#', 'submenu': [
+        {'title': _('Photos'), 'name': '#'},
+        {'title': _('Statistics'), 'name': '#'},
+        {'title': _('Become Active'), 'name': '#'},
+        {'title': _('Wiki'), 'name': '#'},
+    ]},
+    {'title': _('Calendar'), 'name': '#'},
+    {'title': _('Career'), 'name': '#', 'submenu': [
+        {'title': _('Sponsor'), 'name': '#'},
+        {'title': _('Vacancies'), 'name': '#'},
+    ]},
+    {'title': _('Education'), 'name': '#', 'submenu': [
+        {'title': _('Book Sale'), 'name': '#'},
+        {'title': _('Course Overview'), 'name': '#'},
+        {'title': _('Add Exam'), 'name': '#'},
+        {'title': _('Add Summary'), 'name': '#'},
+    ]},
+    {'title': _('Contact'), 'name': '#'},
+]

website/thaliawebsite/settings/settings.py

@@ -39,6 +39,8 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    # Dependencies
+    'static_precompiler',
     # Our apps
     'thaliawebsite',  # include for admin settings
     'members',
@@ -141,7 +143,18 @@ LOCALE_PATHS = ('locale',)
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/dev/howto/static-files/
 
-STATIC_URL = '/static/'
-
 # Where to store uploaded files
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+
+STATIC_URL = '/static/'
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    # other finders
+    'static_precompiler.finders.StaticPrecompilerFinder',
+)
+
+# Precompiler settings
+STATIC_PRECOMPILER_LIST_FILES = True

website/thaliawebsite/static/css/jquery.fancybox.css

+/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
+.fancybox-wrap,
+.fancybox-skin,
+.fancybox-outer,
+.fancybox-inner,
+.fancybox-image,
+.fancybox-wrap iframe,
+.fancybox-wrap object,
+.fancybox-nav,
+.fancybox-nav span,
+.fancybox-tmp
+{
+	padding: 0;
+	margin: 0;
+	border: 0;
+	outline: none;
+	vertical-align: top;
+}
+
+.fancybox-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 8020;
+}
+
+.fancybox-skin {
+	position: relative;
+	background: #f9f9f9;
+	color: #444;
+	text-shadow: none;
+	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.fancybox-opened {
+	z-index: 8030;
+}
+
+.fancybox-outer, .fancybox-inner {
+	position: relative;
+}
+
+.fancybox-inner {
+	overflow: hidden;
+}
+
+.fancybox-type-iframe .fancybox-inner {
+	-webkit-overflow-scrolling: touch;
+}
+
+.fancybox-error {
+	color: #444;
+	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+	margin: 0;
+	padding: 15px;
+	white-space: nowrap;
+}
+
+.fancybox-image, .fancybox-iframe {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.fancybox-image {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+#fancybox-loading {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	margin-top: -22px;
+	margin-left: -22px;
+	background-position: 0 -108px;
+	opacity: 0.8;
+	cursor: pointer;
+	z-index: 8060;
+	background-color: #000;
+}
+
+#fancybox-loading div {
+	width: 44px;
+	height: 44px;
+	background: url('../assets/images/fancybox/fancybox_loading.gif') center center no-repeat;
+}
+
+.fancybox-close {
+	background:url('../assets/images/misc/icon_close.png') 0 0 no-repeat;
+	background-size: 32px 64px;
+	position: absolute;
+	top: 20px;
+	right: 20px;
+	width: 32px;
+	height: 32px;
+	cursor: pointer;
+	z-index: 8040;
+}
+
+.fancybox-download {
+	background:url('../assets/images/misc/icon_download.png') 0 0 no-repeat;
+	background-size: 32px 64px;
+	position: absolute;
+	top: 20px;
+	right: 72px;
+	width: 32px;
+	height: 32px;
+	cursor: pointer;
+	z-index: 8040;
+}
+
+.fancybox-close:hover, .fancybox-download:hover {
+	background-position: 0 -32px;
+}
+
+.fancybox-nav {
+	position: absolute;
+	top: 0;
+	width: 40%;
+	height: 100%;
+	cursor: pointer;
+	text-decoration: none;
+	background: transparent url('../assets/images/fancybox/blank.gif'); /* helps IE */
+	-webkit-tap-highlight-color: rgba(0,0,0,0);
+	z-index: 8040;
+}
+
+.fancybox-prev {
+	left: 0;
+}
+
+.fancybox-next {
+	right: 0;
+}
+
+.fancybox-nav span {
+	background: url('../assets/images/misc/slider_large_next_prev.png') 0 0 no-repeat;
+	background-size: 64px 64px;
+	position: absolute;
+	top: 50%;
+	width: 32px;
+	height: 32px;
+	margin-top: -18px;
+	cursor: pointer;
+	z-index: 8040;
+	visibility: hidden;
+}
+
+.fancybox-prev span {
+	left: 20px;
+	background-position: 0 0;
+}
+
+.fancybox-prev span:hover {
+	background-position: -32px 0;
+}
+
+.fancybox-next span {
+	right: 20px;
+	background-position: 0 -32px;
+}
+
+.fancybox-next span:hover {
+	background-position: -32px -32px;
+}
+
+.fancybox-nav:hover span {
+	visibility: visible;
+}
+
+.fancybox-tmp {
+	position: absolute;
+	top: -99999px;
+	left: -99999px;
+	visibility: hidden;
+	max-width: 99999px;
+	max-height: 99999px;
+	overflow: visible !important;
+}
+
+/* Overlay helper */
+
+.fancybox-lock {
+    overflow: hidden !important;
+    width: auto;
+}
+
+.fancybox-lock body {
+    overflow: hidden !important;
+}
+
+.fancybox-lock-test {
+    overflow-y: hidden !important;
+}
+
+.fancybox-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	display: none;
+	z-index: 8010;
+	background: rgba(255,255,255,0.7);
+}
+
+.fancybox-overlay-fixed {
+	position: fixed;
+	bottom: 0;
+	right: 0;
+}
+
+.fancybox-lock .fancybox-overlay {
+	overflow: auto;
+	overflow-y: scroll;
+}
+
+/* Title helper */
+
+.fancybox-title {
+	visibility: hidden;
+	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
+	position: relative;
+	text-shadow: none;
+	z-index: 8050;
+}
+
+.fancybox-opened .fancybox-title {
+	visibility: visible;
+}
+
+.fancybox-title-float-wrap {
+	position: absolute;
+	bottom: 0;
+	right: 50%;
+	margin-bottom: -35px;
+	z-index: 8050;
+	text-align: center;
+}
+
+.fancybox-title-float-wrap .child {
+	display: inline-block;
+	margin-right: -100%;
+	padding: 2px 20px;
+	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
+	background: rgba(0, 0, 0, 0.8);
+	-webkit-border-radius: 15px;
+	   -moz-border-radius: 15px;
+	        border-radius: 15px;
+	text-shadow: 0 1px 2px #222;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 24px;
+	white-space: nowrap;
+}
+
+.fancybox-title-outside-wrap {
+	position: relative;
+	margin-top: 10px;
+	color: #fff;
+}
+
+.fancybox-title-inside-wrap {
+	padding-top: 10px;
+}
+
+.fancybox-title-over-wrap {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	color: #fff;
+	padding: 10px;
+	background: #000;
+	background: rgba(0, 0, 0, .8);
+}
\ No newline at end of file

website/thaliawebsite/static/css/presets/blue.less

+@preset-name: "ThImbus Blue";
+@preset-icon: concrete-icon(#01adf2, #fff, #01adf2);
+
+@background-color: #fff;
+@primary-color: #01adf2;
+@inverted-color:;
+@lavalamp-color: #fff;
+@faded-color: #fff;
+@dark-primary-color: #01adf2;
+@body-color:;
+
+@logo-image: '../images/site_logo.png';

website/thaliawebsite/static/css/presets/defaults.less

+@preset-name: "ThImbus Defaults";
+@preset-icon: concrete-icon(#E62272, #FFFFFF, #D8206B);
+
+@background-color: #FFFFFF;
+@primary-color: #E62272;
+@inverted-color: #000000;
+@lavalamp-color: rgba(230,35,113,0.68);
+@faded-color: #EEEDE7;
+@dark-primary-color: #D8206B;
+@body-color: #313131;
+
+@logo-image: '../images/site_logo.png';

website/thaliawebsite/static/css/presets/green.less

+@preset-name: "ThImbus Green";
+@preset-icon: concrete-icon(#89bf43, #fff, #89bf43);
+
+@background-color: #fff;
+@primary-color: #89bf43;
+@inverted-color:;
+@lavalamp-color: #fff;
+@faded-color: #fff;
+@dark-primary-color: #89bf43;
+@body-color:;
+
+@logo-image: '../images/site_logo.png';

website/thaliawebsite/static/css/presets/orange.less

+@preset-name: "ThImbus Orange";
+@preset-icon: concrete-icon(#efb700, #e7e9e2, #efb700);
+
+@background-color: #e7e9e2;
+@primary-color: #efb700;
+@inverted-color:;
+@lavalamp-color: #e7e9e2;
+@faded-color: #e7e9e2;
+@dark-primary-color: #efb700;
+@body-color:;
+
+@logo-image: '../images/site_logo.png';
+
+/* Orange also included a background image, which isn't currently included in the preset.
+ * @background-image: '../../images/pattern/pattern_orange.png'; */

website/thaliawebsite/static/css/presets/red.less

+@preset-name: "ThImbus Red";
+@preset-icon: concrete-icon(#e05c50, #eeede7, #e05c50);
+
+@background-color: #eeede7;
+@primary-color: #e05c50;
+@inverted-color:;
+@lavalamp-color: #eeede7;
+@faded-color: #EEEDE7;
+@dark-primary-color: #e05c50;
+@body-color:;
+
+@logo-image: '../images/site_logo.png';

website/thaliawebsite/static/css/skin.less

+@import "presets/defaults.less";
+/* -------------------------------------------------------------------------------- /
+	[1]	SETUP - general settings, common classes
+/ -------------------------------------------------------------------------------- */
+
+	body { background: @background-color; color: @body-color; }
+.thimbus-page {
+	a { color:@primary-color; }
+	::-moz-selection { background:@primary-color; }
+	::selection { background:@primary-color; }
+
+/* -------------------------------------------------------------------------------- /
+	[2]	LAYOUT
+/ -------------------------------------------------------------------------------- */
+
+	#main { background:@background-color; }
+
+/* -------------------------------------------------------------------------------- /
+	[3] HEADER
+/ -------------------------------------------------------------------------------- */
+
+	#header { background:@background-color; }
+	#header-info { background:@primary-color; }
+	#logo {
+		padding: 55px 0 !important;
+		img {
+			content: url(@logo-image);
+		}
+	}
+
+/* -------------------------------------------------------------------------------- /
+	[4] NAVIGATION
+/ -------------------------------------------------------------------------------- */
+
+	#primary-navigation {
+		background:@background-color;
+		.nav {
+			&> li {
+				&:before { background:@background-color; }
+				&:hover > a { color:@primary-color; }
+				&.nav-path-selected > a { color:@primary-color; }
+			}
+
+			li {
+				a {
+					background-color:@background-color;
+					color:@inverted-color;
+					font-family: 'GillSansMT-Condensed';
+					font-weight: normal;
+					font-weight: normal;
+					font-size:24px;
+				}
+				&> ul { background:@background-color; }
+			}
+
+			ul li {
+				border-top:none;
+
+				a { color:@inverted-color; }
+				&:hover > a { background-color:@dark-primary-color; }
+				&.nav-path-selected > a { background-color:@primary-color; }
+
+			}
+			.menu-responsive {
+				background-color:@inverted-color;
+				.menu-title {
+					font-family: 'GillSansMT-Condensed';
+					font-weight: normal;
+					font-size:24px;
+					padding-left: 4px;
+				}
+			}
+		}
+	}
+
+/* -------------------------------------------------------------------------------- /
+	[5] FOOTER
+/ -------------------------------------------------------------------------------- */
+
+	#top-footer { background:@primary-color; }
+	#bottom { background:@background-color; }
+
+/* -------------------------------------------------------------------------------- /
+	[6] WIDGETS
+/ -------------------------------------------------------------------------------- */
+
+	.widget {
+		textarea,
+		input[type="text"],
+		input[type="password"],
+		input[type="datetime"],
+		input[type="datetime-local"],
+		input[type="date"],
+		input[type="month"],
+		input[type="time"],
+		input[type="week"],
+		input[type="number"],
+		input[type="email"],
+		input[type="url"],
+		input[type="search"],
+		input[type="tel"],
+		input[type="color"],
+		.uneditable-input { background:@faded-color; }
+	}
+
+/* -------------------------------------------------------------------------------- /
+	[7] FORM ELEMENTS
+/ -------------------------------------------------------------------------------- */
+
+	.btn-style1 {
+		background:@primary-color;
+		&:hover { background:@inverted-color !important; }
+	}
+
+/* -------------------------------------------------------------------------------- /
+	[8.1] CONTENT COMMON
+/ -------------------------------------------------------------------------------- */
+
+	h1, /*h2,*/ h3, h4, h5, h6, .slider-dark-h1, .slider-dark-h2, .slider-dark-h3 { color:@inverted-color; font-family: 'GillSansMT-Condensed'; text-transform: uppercase; }
+	h1:before { background:@primary-color; }
+	.tp-caption.slider-title-large:before, .tp-caption.slider-title:before { background: @inverted-color; }
+	.circle { background-color: @inverted-color; }
+	.circle-border { border-color: @inverted-color; }
+	div[class|="social-icon"] a { background-color: @inverted-color; }
+
+/* -------------------------------------------------------------------------------- /
+	[8.2] SHORTCODES
+/ -------------------------------------------------------------------------------- */
+
+	.link-tabs > li.current a,
+	.link-tabs > li:hover a,
+	.tabs > li.current a,
+	.tabs > li:hover a,
+	.tabs-content > li.current .tab-title a,
+	.tabs-content > li .tab-title a:hover { color:@primary-color; }
+	.toggles > li.current a,
+	.toggles > li:hover a { color:@primary-color; }
+	.progress-style1 .bar { background:@primary-color; }
+	.highlight1 {
+		border-bottom:dotted 1px @primary-color;
+		color:@primary-color;
+	}
+	.highlight2 { background:@primary-color; }
+
+/* -------------------------------------------------------------------------------- /
+	[8.4] BLOG
+/ -------------------------------------------------------------------------------- */
+
+	.post-body h2 a, .post-meta span { color:@inverted-color; }
+	.post-body h2 a:hover { color:@primary-color; }
+	.post-overlay { background:@primary-color; }
+	.post-overlay-icons a { background-color: @inverted-color; }
+	.post-overlay-icons li span { display: none; }
+
+/* -------------------------------------------------------------------------------- /
+	[8.8] COMMENTS
+/ -------------------------------------------------------------------------------- */
+
+	.comment-container:hover { border-color:@primary-color; }
+	#comment-list li .comment-container:hover h4 { color:@primary-color; }
+
+/* -------------------------------------------------------------------------------- /