Commit 1495d70d authored by onny's avatar onny

bundle libraries locally

parent 47b8a7b3
......@@ -49,7 +49,7 @@
padding-bottom: 10px;
}
.imageItem .controlBoxes .fa {
.imageItem .controlBoxes .icon {
font-size: 27px;
padding: 5px;
border-radius: 5px;
......@@ -59,7 +59,7 @@
margin: 0px 4px;
}
.mediaItem .controlBoxes .fa:hover {
.mediaItem .controlBoxes .icon:hover {
opacity: 1;
}
......
This diff is collapsed.
......@@ -6,7 +6,9 @@
border-right: 1px solid #d6d6d6;
cursor: pointer;
padding: 0px 30px;
font-size: 16px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
}
.menuItem > * {
......@@ -19,6 +21,7 @@
.logo {
font-weight: bold;
text-transform: lowercase;
font-size: 25px;
}
......@@ -37,7 +40,7 @@
border-left: 0px;
}
.search .fa-times {
.search .ion-md-close {
pointer-events: all;
}
......@@ -45,6 +48,19 @@
height: 100%;
border-left: 1px solid #d6d6d6;
padding-left: 30px;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: bold;
}
.ion-ios-arrow-down {
font-size: 25px;
}
.ion-ios-arrow-down::after {
display: inline-block;
}
.searchArea {
......@@ -134,8 +150,7 @@
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: bold;
font-size: 25px;
}
.fa {
......
/*!
* Masonry v4.2.2
* Cascading grid layout library
* https://masonry.desandro.com
* MIT License
* by David DeSandro
*/
( function( window, factory ) {
// universal module definition
/* jshint strict: false */ /*globals define, module, require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'outlayer/outlayer',
'get-size/get-size'
],
factory );
} else if ( typeof module == 'object' && module.exports ) {
// CommonJS
module.exports = factory(
require('outlayer'),
require('get-size')
);
} else {
// browser global
window.Masonry = factory(
window.Outlayer,
window.getSize
);
}
}( window, function factory( Outlayer, getSize ) {
'use strict';
// -------------------------- masonryDefinition -------------------------- //
// create an Outlayer layout class
var Masonry = Outlayer.create('masonry');
// isFitWidth -> fitWidth
Masonry.compatOptions.fitWidth = 'isFitWidth';
var proto = Masonry.prototype;
proto._resetLayout = function() {
this.getSize();
this._getMeasurement( 'columnWidth', 'outerWidth' );
this._getMeasurement( 'gutter', 'outerWidth' );
this.measureColumns();
// reset column Y
this.colYs = [];
for ( var i=0; i < this.cols; i++ ) {
this.colYs.push( 0 );
}
this.maxY = 0;
this.horizontalColIndex = 0;
};
proto.measureColumns = function() {
this.getContainerWidth();
// if columnWidth is 0, default to outerWidth of first item
if ( !this.columnWidth ) {
var firstItem = this.items[0];
var firstItemElem = firstItem && firstItem.element;
// columnWidth fall back to item of first element
this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
// if first elem has no width, default to size of container
this.containerWidth;
}
var columnWidth = this.columnWidth += this.gutter;
// calculate columns
var containerWidth = this.containerWidth + this.gutter;
var cols = containerWidth / columnWidth;
// fix rounding errors, typically with gutters
var excess = columnWidth - containerWidth % columnWidth;
// if overshoot is less than a pixel, round up, otherwise floor it
var mathMethod = excess && excess < 1 ? 'round' : 'floor';
cols = Math[ mathMethod ]( cols );
this.cols = Math.max( cols, 1 );
};
proto.getContainerWidth = function() {
// container is parent if fit width
var isFitWidth = this._getOption('fitWidth');
var container = isFitWidth ? this.element.parentNode : this.element;
// check that this.size and size are there
// IE8 triggers resize on body size change, so they might not be
var size = getSize( container );
this.containerWidth = size && size.innerWidth;
};
proto._getItemLayoutPosition = function( item ) {
item.getSize();
// how many columns does this brick span
var remainder = item.size.outerWidth % this.columnWidth;
var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
// round if off by 1 pixel, otherwise use ceil
var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
colSpan = Math.min( colSpan, this.cols );
// use horizontal or top column position
var colPosMethod = this.options.horizontalOrder ?
'_getHorizontalColPosition' : '_getTopColPosition';
var colPosition = this[ colPosMethod ]( colSpan, item );
// position the brick
var position = {
x: this.columnWidth * colPosition.col,
y: colPosition.y
};
// apply setHeight to necessary columns
var setHeight = colPosition.y + item.size.outerHeight;
var setMax = colSpan + colPosition.col;
for ( var i = colPosition.col; i < setMax; i++ ) {
this.colYs[i] = setHeight;
}
return position;
};
proto._getTopColPosition = function( colSpan ) {
var colGroup = this._getTopColGroup( colSpan );
// get the minimum Y value from the columns
var minimumY = Math.min.apply( Math, colGroup );
return {
col: colGroup.indexOf( minimumY ),
y: minimumY,
};
};
/**
* @param {Number} colSpan - number of columns the element spans
* @returns {Array} colGroup
*/
proto._getTopColGroup = function( colSpan ) {
if ( colSpan < 2 ) {
// if brick spans only one column, use all the column Ys
return this.colYs;
}
var colGroup = [];
// how many different places could this brick fit horizontally
var groupCount = this.cols + 1 - colSpan;
// for each group potential horizontal position
for ( var i = 0; i < groupCount; i++ ) {
colGroup[i] = this._getColGroupY( i, colSpan );
}
return colGroup;
};
proto._getColGroupY = function( col, colSpan ) {
if ( colSpan < 2 ) {
return this.colYs[ col ];
}
// make an array of colY values for that one group
var groupColYs = this.colYs.slice( col, col + colSpan );
// and get the max value of the array
return Math.max.apply( Math, groupColYs );
};
// get column position based on horizontal index. #873
proto._getHorizontalColPosition = function( colSpan, item ) {
var col = this.horizontalColIndex % this.cols;
var isOver = colSpan > 1 && col + colSpan > this.cols;
// shift to next row if item can't fit on current row
col = isOver ? 0 : col;
// don't let zero-size items take up space
var hasSize = item.size.outerWidth && item.size.outerHeight;
this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex;
return {
col: col,
y: this._getColGroupY( col, colSpan ),
};
};
proto._manageStamp = function( stamp ) {
var stampSize = getSize( stamp );
var offset = this._getElementOffset( stamp );
// get the columns that this stamp affects
var isOriginLeft = this._getOption('originLeft');
var firstX = isOriginLeft ? offset.left : offset.right;
var lastX = firstX + stampSize.outerWidth;
var firstCol = Math.floor( firstX / this.columnWidth );
firstCol = Math.max( 0, firstCol );
var lastCol = Math.floor( lastX / this.columnWidth );
// lastCol should not go over if multiple of columnWidth #425
lastCol -= lastX % this.columnWidth ? 0 : 1;
lastCol = Math.min( this.cols - 1, lastCol );
// set colYs to bottom of the stamp
var isOriginTop = this._getOption('originTop');
var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
stampSize.outerHeight;
for ( var i = firstCol; i <= lastCol; i++ ) {
this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
}
};
proto._getContainerSize = function() {
this.maxY = Math.max.apply( Math, this.colYs );
var size = {
height: this.maxY
};
if ( this._getOption('fitWidth') ) {
size.width = this._getContainerFitWidth();
}
return size;
};
proto._getContainerFitWidth = function() {
var unusedCols = 0;
// count unused columns
var i = this.cols;
while ( --i ) {
if ( this.colYs[i] !== 0 ) {
break;
}
unusedCols++;
}
// fit container to columns that have been used
return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
};
proto.needsResizeLayout = function() {
var previousWidth = this.containerWidth;
this.getContainerWidth();
return previousWidth != this.containerWidth;
};
return Masonry;
}));
This diff is collapsed.
......@@ -6,21 +6,21 @@ document.addEventListener("DOMContentLoaded", function() {
document.getElementsByClassName("search")[0].classList.add("active");
document.getElementsByClassName("icon-search")[0].classList.add("noBorder");
document.getElementsByClassName("inputField")[0].focus();
searchIcon = document.getElementsByClassName('fa-search-big')[0];
searchIcon.classList.remove('fa-search');
searchIcon.classList.add('fa-times');
searchIcon = document.getElementsByClassName('ion-md-search-big')[0];
searchIcon.classList.remove('ion-md-search');
searchIcon.classList.add('ion-md-close');
};
if (!event.target.closest('.search') || event.target.matches('.fa-times')) {
if (!event.target.closest('.search') || event.target.matches('.ion-md-close')) {
searchArea = document.getElementsByClassName("searchArea")[0];
searchArea.classList.remove('showFlex');
searchBtn = document.getElementsByClassName("search")[0];
searchBtn.classList.remove('active');
iconSearch = document.getElementsByClassName("icon-search")[0];
iconSearch.classList.remove('noBorder');
searchIcon = document.getElementsByClassName('fa-search-big')[0];
searchIcon.classList.remove('fa-times');
searchIcon.classList.add('fa-search');
searchIcon = document.getElementsByClassName('ion-md-search-big')[0];
searchIcon.classList.remove('ion-md-close');
searchIcon.classList.add('ion-md-search');
};
if (event.target.closest('.lang')) {
......
This diff is collapsed.
......@@ -9,10 +9,10 @@
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="{% static 'css/menu.css' %}">
<link rel="stylesheet" href="{% static 'css/entry.css' %}">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/vue-masonry@0.11.3/dist/vue-masonry-plugin-window.js"></script>
<script src="{% static 'js/masonry-pkgd-min-4.2.2.js' %}"></script>
<script src="{% static 'js/vue-masonry-0.11.8.js' %}"></script>
<link href="{% static 'css/ionicons.min-4.5.10-0.css' %}" rel="stylesheet">
<title>opensaai</title>
</head>
<body>
......@@ -28,34 +28,31 @@
<div class='search menuItem'>
<div class='searchArea'>
<input class='inputField' type='text' placeholder="{% trans "Search" %}">
<i class="fa fa-search"></i>
<i class="icon ion-md-search"></i>
</div>
<span class='icon icon-search'>
<i class="fa fa-search fa-search-big"></i>
<span class='icon-search'>
<i class="icon ion-md-search ion-md-search-big"></i>
</span>
</div>
<div class='lang menuItem'>
<span class='icon'>
<div class="dropdown">
<i class="fa fa-chevron-down fa-margin"></i>
{% get_current_language as CURRENT_LANGUAGE_CODE %}
<span>{{ CURRENT_LANGUAGE_CODE }}</span>
<div id="menu-lang" class="dropdown-content dropdown-lang active">
{% get_available_languages as LANGUAGES %}
{% for lang_code, lang_name in LANGUAGES %}
{% if lang_code != CURRENT_LANGUAGE_CODE %}
<a href="/{{ lang_code }}">{{ lang_name }}</a>
{% endif %}
{% endfor %}
</div>
<div class="dropdown">
<i class="icon ion-ios-arrow-down fa-margin"></i>
{% get_current_language as CURRENT_LANGUAGE_CODE %}
<span>{{ CURRENT_LANGUAGE_CODE }}</span>
<div id="menu-lang" class="dropdown-content dropdown-lang active">
{% get_available_languages as LANGUAGES %}
{% for lang_code, lang_name in LANGUAGES %}
{% if lang_code != CURRENT_LANGUAGE_CODE %}
<a href="/{{ lang_code }}">{{ lang_name }}</a>
{% endif %}
{% endfor %}
</div>
</span>
</div>
</div>
<div class='login menuItem'>
<span class='icon'>
{% if authenticated %}
<div class="dropdown">
<i class="fa fa-user"></i>
<i class="icon ion-md-person"></i>
<div id="menu-profile" class="dropdown-content dropdown-login active">
ubezi@student.kit.edu
<hr>
......@@ -63,16 +60,15 @@
</div>
</div>
{% else %}
<i class="fa fa-lock fa-margin"></i>
<i class="icon ion-md-lock fa-margin"></i>
<span>{% trans "Sign In" %}</span>
{% endif %}
</span>
</div>
<div class='loginOverlay'>
<div class='loginBox'>
<div class='header'>
<div class='title'>{% trans "Sign In" %}</div>
<i class="fa fa-times"></i>
<i class="icon ion-md-close"></i>
</div>
<div class='content'>
<div>
......@@ -122,8 +118,7 @@
</footer>
</content>
<!-- <script type="text/javascript" src="{% static 'js/vue-2.6.10.min.js' %}"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="{% static 'js/vue-2.6.10.min.js' %}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="{% static 'js/vue-resource-1.5.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
......
......@@ -8,8 +8,8 @@
<div class='imgbox'>
<img :src='entry.fileThumb'>
<div class='controlBoxes'>
<i class="fa fa-heart"></i>
<i class="fa fa-search-plus"></i>
<i class="icon ion-ios-heart-empty"></i>
<i class="icon ion-ios-expand"></i>
</div>
</div>
<span class='entryTitle'>[[ entry.fileName ]]</span>
......
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