Commit b0abdf40 authored by alexandre's avatar alexandre

Merge branch 'master' of gitlab.constantvzw.org:osp/work.w

parents ca3ab581 f9d96349
......@@ -50,7 +50,7 @@
--font-size--small: 75%;
--dash-size: .3em;
--dash-size: 6px;
}
......@@ -766,11 +766,12 @@ li.axis { position: relative; }
cursor: not-allowed;
}
li li { padding-left: var(--row-indent); }
/* li li { padding-left: var(--row-indent); } */
.axis-row {
position: relative;
padding: 0;
padding-left: var(--row-indent);
border: none;
padding-bottom: var(--axis-bottom-padding);
display: block;
......@@ -782,8 +783,8 @@ li li { padding-left: var(--row-indent); }
transparent var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end))
},
transparent var(--axis-horizontal-line-end));
}
[data-collapsed="false"]>.axis-row [name="toggle"]:before { content: "▼"; }
......@@ -846,7 +847,7 @@ ol ol::after {
*/
.axis-row--header {
position: absolute;
right: 100%;
left: 0;
/* Position it before the line, irregardless of the header width */
width: var(--row-indent);
text-align: center;
......@@ -958,6 +959,7 @@ ol ol::after {
.sublines {
position: relative;
margin-left: var(--row-indent);
}
.axis-row:hover .icon--handle { visibility: visible; }
......@@ -990,6 +992,14 @@ ol ol > li:first-child {
/* margin-top: calc(-1 * var(--axis-tag-size)); */
}
.root > li > .axis-row {
padding-left: 0;
}
.root > li > .sublines {
margin-left: 0;
}
/**
* Stretch alternative wrapper to full height
* make it flex to allow vertical spacing.
......@@ -1000,7 +1010,10 @@ ol ol > li:first-child {
position: absolute;
top: 0;
bottom: 0;
background: repeating-linear-gradient(to bottom, var(--background-color) 0, var(--background-color) .25em, transparent .25em, transparent .5em);
/* background: repeating-linear-gradient(to bottom,
var(--background-color) var(--dash-size),
transparent var(--dash-size),
transparent calc(var(--dash-size) * 2)); */
}
/*
......@@ -1249,8 +1262,7 @@ li + li .alt-symbol { display: none; }
/* .condition:hover .full, */
.indications:hover .full { display: inline-block; }
.condition, .terme {
/* position: relative; */
/* .condition, .terme {
display: inline-block;
background-color: var(--row-color);
height: .6em;
......@@ -1259,6 +1271,30 @@ li + li .alt-symbol { display: none; }
background-clip: content-box;
border-radius: 50%/50%;
vertical-align: top;
} */
.condition, .terme {
display: inline-block;
padding: 0;
margin: 0;
width: 1em;
top: 0;
bottom: 0;
margin-left: -1em;
/** Fixme! **/
position: absolute;
z-index: 2;
}
.condition:before, .terme:before {
display: inline-block;
height: .6em;
width: .6em;
margin-top: .8em;
content: "";
background-color: var(--row-color);
border-radius: 50%/50%;
}
.terme {
......@@ -1276,7 +1312,8 @@ li + li .alt-symbol { display: none; }
background: var(--row-color);
padding: .5em 4em 0 2em;
top: 0;
bottom: var(--axis-bottom-padding);
/* bottom: 0; */
height: 2em;
margin-left: -.3em;
z-index: 1;
}
......@@ -1460,10 +1497,41 @@ li .icon--tag { color: white } */
partially.
*/
.axis-row--header--line {
position: absolute;
left: var(--axis-vertical-line-start);
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(to bottom,
transparent var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end));
}
/**
* Alternative have dashed lines
*/
[data-alternative]:not([data-alternative=""])
> ol > li > .axis-row > .axis-row--background-wrapper
> .axis-row--header > .axis-row--header--line {
background: repeating-linear-gradient(to right,
transparent 0,
transparent var(--dash-size),
rgb(23, 58, 66) var(--dash-size),
rgb(23, 58, 66) calc(var(--dash-size) * 2)),
linear-gradient(to bottom,
transparent var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end)) ;
}
/**
* Normal axis, draw horizontal line
*/
.axis > header .axis-row--header {
/* .axis > header .axis-row--header {
background:
linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
linear-gradient(to bottom,
......@@ -1471,12 +1539,12 @@ li .icon--tag { color: white } */
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end));
}
} */
/**
* First axis, top of vertical line covered
*/
.axis:first-child > header .axis-row--header {
/* .axis:first-child > header .axis-row--header {
background:
linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
linear-gradient(to bottom,
......@@ -1484,11 +1552,11 @@ li .icon--tag { color: white } */
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
transparent var(--axis-horizontal-line-end));
}
} */
/**
* Last axis, bottom of vertical line covered
*/
.axis:last-child > header .axis-row--header {
/* .axis:last-child > header .axis-row--header {
background:
linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
linear-gradient(to bottom,
......@@ -1496,12 +1564,12 @@ li .icon--tag { color: white } */
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
var(--background-color) var(--axis-horizontal-line-end));
}
} */
/**
* Single axis draw a horizontal line, cover the vertical line
*/
.axis:only-child > header .axis-row--header, .axis.ui-sortable-helper > header .axis-row--header {
/* .axis:only-child > header .axis-row--header, .axis.ui-sortable-helper > header .axis-row--header {
background:
linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
linear-gradient(to bottom,
......@@ -1509,7 +1577,7 @@ li .icon--tag { color: white } */
var(--row-color) var(--axis-horizontal-line-start),
var(--row-color) var(--axis-horizontal-line-end),
var(--background-color) var(--axis-horizontal-line-end));
}
} */
......@@ -1559,6 +1627,13 @@ li .icon--tag { color: white } */
} */
.axis:first-child {
background: linear-gradient(to bottom,
var(--background-color) var(--axis-horizontal-line-middle),
transparent var(--axis-horizontal-line-middle)
);
}
.axis:last-child {
background: linear-gradient(to bottom,
transparent var(--axis-horizontal-line-middle),
......@@ -1566,6 +1641,15 @@ li .icon--tag { color: white } */
);
}
.axis:only-child {
background: var(--background-color);
}
.axis.ui-sortable-helper:last-child {
background: transparent;
}
ol {
background: linear-gradient(to right,
transparent var(--axis-vertical-line-start),
......
......@@ -87,12 +87,16 @@ window.W = window.W || {};
});
//
// type null | file | video
W.AttachmentModel = Backbone.RelationalModel.extend({
defaults: {
id: null,
url: "",
title: "",
attachment: null
attachment: null,
type: "file"
},
urlRoot: '/api/attachments/',
......@@ -106,6 +110,14 @@ window.W = window.W || {};
})
W.VideoAttachmentModel = Backbone.RelationalModel.extend({
defaults: {
type: "vimeo",
title: "",
vimeoId: ""
}
})
W.ScoreModel = Backbone.RelationalModel.extend({
defaults: {
title: "Untitled",
......
......@@ -661,7 +661,6 @@ window.W = window.W || {};
var patt = new RegExp(/\.(\w+)$/),
m = patt.exec(attachment.get('attachment')),
ext = (m && m[1]) ? m[1].toLowerCase() : '';
console.log(m, ext)
switch(ext) {
case 'jpg':
......@@ -679,6 +678,7 @@ window.W = window.W || {};
case 'wav':
case 'opus':
case 'aac':
case 'm4a':
return new W.AttachmentAudio({ model: attachment })
......@@ -1924,6 +1924,7 @@ window.W = window.W || {};
isTree: true,
items: 'li',
toleranceElement: '> header',
// tolerance: 'pointer',
protectRoot: true,
rootID: 'foo',
errorClass: 'move-not-allowed',
......
<label><span class="label-text"><%- t('Titre') %></span><input type="text" name="title" ></label>
<label><span class="label-text"><%- t('Vimeo URL') %></span><input type="text" name="url" ></label>
<a href="<%= attachment %>">[<%= title %>]</a>
<div class="attachment--pdf--full">
<button class="btn--close">x</button>
<iframe src="<%= attachment %>"></iframe>
<iframe src="<%= attachment.replace(/^https?\:/, '') %>"></iframe>
</div>
\ No newline at end of file
<a href="<%= attachment %>">[<%= title %>]</a>
<div class="attachment--vimeo--full">
<button class="btn--close">x</button>
<img src="<%= attachment %>" />
<iframe src="https://player.vimeo.com/video/{{ vimeoId }}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
\ No newline at end of file
<header class="axis-row">
<section class="axis-row--background-wrapper">
<section class="axis-row--header">
<span class="axis-row--header--line"></span>
<span class="icon icon--handle"></span>
</section>
......
......@@ -14,7 +14,7 @@
<div id="main-area">
<div id="expand-level-slider"></div>
<div id="axis-wrapper">
<ol></ol>
<ol class="root"></ol>
</div>
</div>
</article>
......
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