Skip to content
Snippets Groups Projects
Commit f771cce7 authored by Florian Gnaegi - frentix GmbH's avatar Florian Gnaegi - frentix GmbH
Browse files

OO-1068 use ellipsis also in course listing, remove stuff from course listing

parent 9ed09d35
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 58 additions and 41 deletions
src/main/java/org/olat/core/commons/fullWebApp/_content/fullwebapplayout.html
+ 1
− 1
View file @ f771cce7
......@@ -230,7 +230,7 @@ $r.renderForce("development")
<div id="o_main_container" class="o_container_offcanvas container-fluid">
$r.render("main")
<a id="o_toplink" href="#o_top" onclick="o_scrollToElement('#o_top');" title="$r.translateInAttribute("top.alt")">
<span class="glyphicon glyphicon-arrow-up"></span>
<i class="o_icon o_icon_top"></i>
$r.translate("top")
</a>
</div>
......
src/main/java/org/olat/repository/ui/list/_content/node.html
+ 1
− 1
View file @ f771cce7
......@@ -42,7 +42,7 @@
#end
</div>
<div class="o_meta">
<h4 class="o_title">
<h4 class="o_title o_withEllipsis">
$r.render("cat_${id}")
</h4>
</div>
......
src/main/java/org/olat/repository/ui/list/_content/row_1.html
+ 11
− 1
View file @ f771cce7
......@@ -6,7 +6,7 @@
<div class="o_visual_not_available"></div>
#end
</div>
<div class="o_meta">
<div class="o_meta o_withEllipsis">
<div class="o_go_xs visible-xs">
<i class=" o_icon o_icon_start o_icon-lg"></i>
</div>
......@@ -84,4 +84,14 @@
$r.render($row.getDetailsLinkName())
$r.render($row.getStartLinkName())
</div>
<script type="text/javascript">
/* <![CDATA[ */
## Initialize the ellipsis code to hide overlflowed text
jQuery(document).ready(function() {
OPOL.Ellipsis.initEllipsisElement("#${r.getCId()} .o_withEllipsis");
});
/* ]]> */
</script>
</div>
\ No newline at end of file
src/main/webapp/static/js/ellipsis.js
+ 18
− 16
View file @ f771cce7
......@@ -36,22 +36,24 @@
// nothing to do
}
Ellipsis.prototype.initEllipsisElement = function(el) {
var elem = $(el);
// initialize dotdotdot plugin on element
elem.dotdotdot({
callback : function(isTruncated){
if (isTruncated) {
// add marker class
$(this).addClass('o_hasOverflow');
} else {
// remove marker class
$(this).removeClass('o_hasOverflow');
}
},
watch : true, // listen to window resize
after: "div.o_ellipsis_links" // add the more link when truncating
});
Ellipsis.prototype.initEllipsisElement = function(query) {
$(query).each(function(index, elem) {
// initialize dotdotdot plugin on element
$(elem).dotdotdot({
callback : function(isTruncated){
console.log(isTruncated);
if (isTruncated) {
// add marker class
$(this).addClass('o_hasOverflow');
} else {
// remove marker class
$(this).removeClass('o_hasOverflow');
}
},
watch : true, // listen to window resize
after: "div.o_ellipsis_links" // add the more link when truncating
});
});
}
Ellipsis.prototype.showOverflow = function(elem) {
......
src/main/webapp/static/themes/light/modules/_coursesite.scss
+ 20
− 18
View file @ f771cce7
......@@ -64,7 +64,7 @@ $o-coursesite-catalog-border : $brand-primary;
width: $o-coursesite-rowelem-width-md;
overflow: hidden;
border-left: 1px solid $o-coursesite-rowelem-border;
padding-top: floor($line-height-computed / 2);
padding-top: 0.25em;
.o_state, .o_score {
......@@ -122,6 +122,7 @@ $o-coursesite-catalog-border : $brand-primary;
@include text-overflow();
}
.o_methods {
color: $brand-info;
}
}
......@@ -168,10 +169,10 @@ $o-coursesite-catalog-border : $brand-primary;
height: $o-coursesite-rowelem-height-md;
margin: 0 $o-coursesite-rowelem-width-md 0 $o-coursesite-rowelem-width-md;
position: relative;
padding: 1em 0.5em 0.5em 1em;
padding: 1em 0.5em 0.25em 1em;
overflow: hidden;
text-overflow: ellipsis;
/* overflow via JS OPOL.Ellipsis */
.o_title {
margin: 0; /* box moves down otherwhise, replaced with padding */
......@@ -186,6 +187,7 @@ $o-coursesite-catalog-border : $brand-primary;
.o_author{
margin-top: 0.5em;
line-height: 1em;
font-size: 90%;
@include text-overflow();
@extend .text-success;
}
......@@ -201,10 +203,7 @@ $o-coursesite-catalog-border : $brand-primary;
}
}
.o_desc {
margin-top: 0.5em;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.5em;
}
.o_bookmark {
position: absolute;
......@@ -214,9 +213,6 @@ $o-coursesite-catalog-border : $brand-primary;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
height: $o-coursesite-rowelem-height-sm;
margin: 0 $o-coursesite-rowelem-width-sm;
.o_desc {
display: none;
}
}
@media (max-width: $screen-xs-max) {
height: $o-coursesite-rowelem-height-xs;
......@@ -225,7 +221,7 @@ $o-coursesite-catalog-border : $brand-primary;
.o_title {
line-height: $o-coursesite-rowelem-height-xs;
}
.o_author, .o_bookmark, .o_lifecycle {
.o_author, .o_bookmark, .o_lifecycle, .o_desc {
display: none;
}
}
......@@ -271,7 +267,9 @@ $o-coursesite-catalog-border : $brand-primary;
position: relative;
min-height: $o-coursesite-rowelem-width-md;
height: $o-coursesite-rowelem-width-md;
overflow: hidden;
/* overflow via JS OPOL.Ellipsis */
margin: 0 0 0 $o-coursesite-rowelem-width-md;
padding: 1em 0.5em 0.5em 2em;
......@@ -279,7 +277,6 @@ $o-coursesite-catalog-border : $brand-primary;
.o_title {
margin: 0; /* box moves down otherwhise, replaced with padding */
@extend .text-primary;
@include text-overflow();
a {
@extend .o_undecorated;
display: block;
......@@ -327,11 +324,11 @@ $o-coursesite-catalog-border : $brand-primary;
.o_sublevel {
position: relative;
@extend .pull-left;
margin: 0 0 $o-coursesite-catalog-space $o-coursesite-catalog-space;
margin: 0 $o-coursesite-catalog-space $o-coursesite-catalog-space 0;
width: $o-coursesite-rowelem-width-md;
&:first-child {
margin-left: 0;
&:last-child {
margin-right: 0;
}
.o_visual {
......@@ -344,16 +341,21 @@ $o-coursesite-catalog-border : $brand-primary;
left: 0;
bottom: 0;
width: 100%;
border: 1px solid $o-coursesite-catalog-border;
border-top: 0;
background-color: rgba(255,255,255,0.7);
background-color: rgba(255,255,255,0.8);
.o_title {
margin: 0; /* box moves down otherwhise, replaced with padding */
@extend .text-primary;
text-align: center;
line-height: 2em;
height: 2em;
width: 100%;
overflow: hidden;
/* overflow via JS OPOL.Ellipsis */
a {
@extend .o_undecorated;
display: block;
......@@ -363,7 +365,7 @@ $o-coursesite-catalog-border : $brand-primary;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: $o-coursesite-rowelem-width-sm;
margin: 0 0 $o-coursesite-catalog-space-sm $o-coursesite-catalog-space-sm;
margin: 0 $o-coursesite-catalog-space-sm $o-coursesite-catalog-space-sm 0;
.o_visual {
height: $o-coursesite-rowelem-width-sm;
......@@ -374,7 +376,7 @@ $o-coursesite-catalog-border : $brand-primary;
}
@media (max-width: $screen-xs-max) {
width: $o-coursesite-rowelem-width-sm;
margin: 0 0 $o-coursesite-catalog-space-xs $o-coursesite-catalog-space-xs;
margin: 0 $o-coursesite-catalog-space-xs $o-coursesite-catalog-space-xs 0;
.o_visual {
height: $o-coursesite-rowelem-width-sm;
......
src/main/webapp/static/themes/light/modules/_icons.scss
+ 1
− 0
View file @ f771cce7
......@@ -67,6 +67,7 @@ $fa-css-prefix: "o_icon" !default;
.o_icon_table {@extend .o_icon-table; }
.o_icon_to_read { @extend .o_icon-fighter-jet; color:blue;}
.o_icon_tool { @extend .o_icon-gear; }
.o_icon_top {@extend .o_icon-chevron-up; }
.o_icon_upload {@extend .o_icon-upload; }
/* do not move link icons */
......
src/main/webapp/static/themes/light/modules/_main.scss
+ 3
− 1
View file @ f771cce7
......@@ -48,7 +48,9 @@
#o_toplink {
position: absolute;
bottom: 10px; right: 10px;
bottom: 0; right: 10px;
text-align: center;
@extend .o_undecorated;
}
@media (max-width: $screen-xs-max) {
......
src/main/webapp/static/themes/light/theme.css
+ 3
− 3
View file @ f771cce7
This diff is collapsed.
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