github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Style adjusments; make announcements close when backdrop is clicked.

Browse source
This commit is contained in:
Paulo Reis 2016-12-06 14:17:30 +00:00
parent a00acd7458
commit 6a9ab1f525
2 changed files with 83 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
services/web/app/views/project/list.jade
View file

@ -21,12 +21,15 @@ block content
.content.content-alt.project-list-page(ng-controller="ProjectPageController")
.container
div(
.announcements(
ng-controller="AnnouncementsController"
ng-class="{ 'announcements-open': ui.isOpen }"
ng-cloak
)
.announcements-backdrop(ng-if="ui.isOpen")
.announcements-backdrop(
ng-if="ui.isOpen"
ng-click="ui.isOpen = false;"
)
a.announcements-btn(
href
ng-if="announcements.length"
@ -41,15 +44,13 @@ block content
ng-repeat="announcement in announcements"
)
h2.announcement-header {{ announcement.title }}
p.announcement-date {{ announcement.date | date:"longDate" }}
p.announcement-description {{ announcement.excerpt }}
a(
ng-href="{{ announcement.url }}"
target="_blank"
) Read more
//- .card.card-thin(ng-show="dataReceived")
//- a.announcement-title(href, ng-click="openLink()") {{ title }}
//- p.announcement-description {{ excerpt }}
.announcement-meta
p.announcement-date {{ announcement.date | date:"longDate" }}
a.announcement-link(
ng-href="{{ announcement.url }}"
target="_blank"
) Read more
.row(ng-cloak)
span(ng-if="projects.length > 0")

105
services/web/public/stylesheets/app/project-list.less
View file

@ -1,4 +1,4 @@
@announcements-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
@announcements-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
@keyframes pulse {
0% {
@ -318,6 +318,12 @@ ul.project-list {
}
}
.announcements {
position: absolute;
bottom: 0;
right: 3%;
}
.announcements-backdrop {
position: fixed;
top: 0;
@ -333,7 +339,7 @@ ul.project-list {
.announcements-btn {
position: absolute;
bottom: -50px;
right: 3%;
right: 0;
width: 80px;
height: 80px;
background: url(/img/lion-128.png) no-repeat center/80% transparent;
@ -352,52 +358,83 @@ ul.project-list {
&-has-new, &-has-new:hover {
background-color: #FFF;
box-shadow: @announcements-shadow;
bottom: 40px;
bottom: 30px;
}
}
.announcements-badge {
display: inline-block;
position: absolute;
font-size: 11px;
height: 1.8em;
min-width: 1.8em;
border-radius: 0.9em;
line-height: 1.8;
padding: 0 2px;
top: 1px;
right: 1px;
font-weight: bold;
color: #FFF;
background-color: @red;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
z-index: 1;
animation: pulse 1s alternate infinite;
}
.announcements-badge {
display: inline-block;
position: absolute;
font-size: 11px;
height: 1.8em;
min-width: 1.8em;
border-radius: 0.9em;
line-height: 1.8;
padding: 0 2px;
top: 1px;
right: 1px;
font-weight: bold;
color: #FFF;
background-color: @red;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
z-index: 1;
animation: pulse 1s alternate infinite;
}
.announcements-body {
position: absolute;
right: 3%;
bottom: 130px;
right: 95px;
bottom: 30px;
width: 700px;
min-height: 100px;
background: #FFF;
z-index: 1;
box-shadow: @announcements-shadow;
padding: 0 @line-height-computed;
padding: @line-height-computed;
border-radius: @border-radius-base;
animation: fade-in 0.35s forwards;
&::after {
content: "\25b8";
position: absolute;
left: 100%;
bottom: 17px;
width: 30px;
color: #FFF;
text-shadow: @announcements-shadow;
font-size: 2em;
overflow: hidden;
text-indent: -6px;
}
}
.announcement {
margin-bottom: @line-height-computed;
}
.announcement-header {
.page-header;
margin-bottom: @line-height-computed * 1.5;
&:last-child {
margin-bottom: 0;
}
.announcement-date {
.small;
margin: (@line-height-computed / 4) 0;
}
.announcement-header {
.page-header;
margin: 0;
}
.announcement-description {
margin: (@line-height-computed / 4) 0 (@line-height-computed / 2);
}
.announcement-meta {
.clearfix;
font-size: 0.9em;
}
.announcement-date {
float: left;
color: @gray;
margin: 0;
}
.announcement-link {
float: right;
margin: 0;
}