Refactor CSS fixes #263
This commit is contained in:
Jared Kerim
Jared Kerim
Родитель
9d3b65d48b
Коммит
779564952b
|
|
@ -1,48 +1,55 @@
|
|||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #F8F8F8;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 60px;
|
||||
background: #002d5a;
|
||||
color: #dedede;
|
||||
fill: #dedede;
|
||||
padding: 10px 0px;
|
||||
box-shadow: 0 2px 10px 0 rgba(6, 6, 6, 0.3);
|
||||
}
|
||||
|
||||
#experimenter_logo {
|
||||
margin-top: 14px;
|
||||
#site-logo {
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
transition: color ease-in-out .15s, fill ease-in-out .15s;
|
||||
}
|
||||
|
||||
#experimenter_logo:hover {
|
||||
#site-logo:hover {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#header a {
|
||||
color: #dedede;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header a:hover {
|
||||
color: #dedede;
|
||||
}
|
||||
|
||||
#header_icon_svg {
|
||||
#site-icon {
|
||||
height: 30px;
|
||||
margin-bottom: -4px;
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
#header #header_right {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
#header #header_right a {
|
||||
margin-left: 5px;
|
||||
#header-user-name {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -50,17 +57,12 @@ footer {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#content_header {
|
||||
#content-header {
|
||||
margin-top: 15px;
|
||||
font-size: 28px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
#projects-list a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.project {
|
||||
.tile {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 2px 5px 0 rgba(12, 12, 13, 0.1);
|
||||
|
|
@ -69,11 +71,15 @@ footer {
|
|||
background-color: white;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
.tile:hover {
|
||||
box-shadow: 0 3px 8px 0 rgba(6, 6, 6, 0.2);
|
||||
|
||||
.card-preview {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image {
|
||||
.tile-image {
|
||||
height: 300px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -84,12 +90,12 @@ footer {
|
|||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.project-default-image {
|
||||
.tile-default-image {
|
||||
width: 50%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
.tile-info {
|
||||
padding: 12px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
|
|
@ -97,11 +103,11 @@ footer {
|
|||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
.project_experiment_name {
|
||||
.tile-name {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project_experiment_count {
|
||||
.tile-subheader {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
color: #888;
|
||||
|
|
@ -110,11 +116,7 @@ footer {
|
|||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.experiment {
|
||||
.card {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 2px 5px 0 rgba(12, 12, 13, 0.1);
|
||||
|
|
@ -125,22 +127,15 @@ footer {
|
|||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.experiment:hover {
|
||||
.card:hover {
|
||||
box-shadow: 0 3px 8px 0 rgba(6, 6, 6, 0.2);
|
||||
}
|
||||
|
||||
.experiment-preview {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-left: 0px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.experiment-status {
|
||||
.card-status {
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.experiment-status h4 {
|
||||
.card-status h4 {
|
||||
padding: 10px;
|
||||
margin-top: 0px;
|
||||
margin-left: 10px;
|
||||
|
|
@ -148,68 +143,51 @@ footer {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.experiment-status-Created {
|
||||
.card-status-Created {
|
||||
background-color: #00c5ff;
|
||||
}
|
||||
|
||||
.experiment-status-Pending {
|
||||
.card-status-Pending {
|
||||
background-color: #ffa21e;
|
||||
}
|
||||
|
||||
.experiment-status-Accepted {
|
||||
.card-status-Accepted {
|
||||
background-color: #ffa21e;
|
||||
}
|
||||
|
||||
.experiment-status-Launched {
|
||||
.card-status-Launched {
|
||||
background-color: #34c834;
|
||||
}
|
||||
|
||||
.experiment-status-Complete {
|
||||
.card-status-Complete {
|
||||
background-color: #1c81d8;
|
||||
}
|
||||
|
||||
.experiment-status-Rejected {
|
||||
.card-status-Rejected {
|
||||
background-color: #e9433e;
|
||||
}
|
||||
|
||||
.experiment-image {
|
||||
.card-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.experiment-image img {
|
||||
.card-image img {
|
||||
opacity: 0.1;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.experiment-overview {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.experiment-overview h4{
|
||||
.card-title {
|
||||
background-color: #EFEFEF;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.experiment-objectives {
|
||||
.card-content {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.card-content-body {
|
||||
overflow: hidden;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.experiment-population {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.experiment-population h4 {
|
||||
border-top-right-radius: 5px;
|
||||
background-color: #EFEFEF;
|
||||
margin: 0px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.experiment-content {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,40 +27,36 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<a href="{% url "projects-list" %}">
|
||||
<h2 id="experimenter_logo">
|
||||
<svg id="header_icon_svg" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="GLYPH"><path d="M16,0L1.565,8v16L16,32l14.435-8V8L16,0z M24.237,20.565L16,25.131l-8.237-4.565v-9.131L16,6.869l8.237,4.565V20.565z"/><polygon points="10.364,12.877 16,9.753 21.636,12.877 21.636,19.123 16,22.247 10.364,19.123 "/></g>
|
||||
</svg>
|
||||
Mozilla Experimenter
|
||||
</h2>
|
||||
<a id="site-logo" href="{% url "projects-list" %}">
|
||||
<svg id="site-icon" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="GLYPH"><path d="M16,0L1.565,8v16L16,32l14.435-8V8L16,0z M24.237,20.565L16,25.131l-8.237-4.565v-9.131L16,6.869l8.237,4.565V20.565z"/><polygon points="10.364,12.877 16,9.753 21.636,12.877 21.636,19.123 16,22.247 10.364,19.123 "/></g>
|
||||
</svg>
|
||||
Mozilla Experimenter
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<div id="header_right">
|
||||
{{ request.user }}
|
||||
<a target="_blank" href="https://github.com/mozilla/experimenter/issues/new">
|
||||
<button class="btn btn-success">Feedback</button>
|
||||
</a>
|
||||
</div>
|
||||
<div id="header-user-info" class="col-md-6 text-right">
|
||||
<span id="header-user-name">{{ request.user }}</span>
|
||||
<a class="btn btn-success" target="_blank" href="https://github.com/mozilla/experimenter/issues/new">
|
||||
Feedback
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content_body" class="container">
|
||||
<div class="container">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<hr/>
|
||||
© Mozilla Corporation 2017
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<hr/>
|
||||
© Mozilla Corporation 2017
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
|
|
|
|||
|
|
@ -3,44 +3,44 @@
|
|||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div id="content_header" class="row">
|
||||
<div class="project-name col-md-6">
|
||||
<div id="content-header" class="row">
|
||||
<div class="col-md-6">
|
||||
{{ object.name }}
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<div class="col-md-6 text-right light-text">
|
||||
{{ object.experiments.count }} Experiment{{ object.experiments.count|pluralize }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="experiments_list" class="row">
|
||||
<div id="card-list" class="row">
|
||||
{% for experiment in object.experiments.most_recently_changed %}
|
||||
<div class="experiment col-md-12">
|
||||
<div class="experiment-preview col-md-2">
|
||||
<div class="experiment-status experiment-status-{{ experiment.status }}">
|
||||
<div class="card col-md-12">
|
||||
<div class="no-padding col-md-2">
|
||||
<div class="card-status card-status-{{ experiment.status }}">
|
||||
<h4>{{ experiment.status }}</h4>
|
||||
</div>
|
||||
<div class="experiment-image">
|
||||
<div class="card-image">
|
||||
<img src="{% static "imgs/experiment.svg" %}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="experiment-overview col-md-7">
|
||||
<h4>{{ experiment.name }}</h4>
|
||||
<div class="experiment-content">
|
||||
<div class="no-padding col-md-7">
|
||||
<h4 class="card-title">{{ experiment.name }}</h4>
|
||||
<div class="card-content">
|
||||
<p>
|
||||
<strong>
|
||||
{{ experiment.changes.latest }}
|
||||
</strong>
|
||||
</p>
|
||||
<p class="experiment-objectives">{{ experiment.objectives }}</p>
|
||||
<p class="card-content-body">{{ experiment.objectives }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experiment-population col-md-3">
|
||||
<h4>
|
||||
<div class="no-padding col-md-3">
|
||||
<h4 class="card-title">
|
||||
{{ experiment.population_percent|stringformat:"17g" }}% of
|
||||
Firefox
|
||||
{{ experiment.firefox_version }}
|
||||
{{ experiment.firefox_channel }}
|
||||
</h4>
|
||||
<div class="experiment-content">
|
||||
<div class="card-content">
|
||||
<p>
|
||||
<strong>
|
||||
{{ experiment.control.ratio }}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
Variant
|
||||
</strong>
|
||||
</p>
|
||||
<p>{{ experiment.client_matching }}</p>
|
||||
<p class="card-content-body">{{ experiment.client_matching }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@
|
|||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div id="content_header" class="row">
|
||||
<div id="content-header" class="row">
|
||||
<div class="col-md-12 text-right">
|
||||
<span id="projects_count">{{ object_list.count }} Project{{ object_list.count|pluralize }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="projects-list" class="row">
|
||||
<div class="row">
|
||||
{% for project in object_list %}
|
||||
<div class="col-md-4">
|
||||
<a href="{% url "projects-detail" slug=project.slug %}">
|
||||
<div class="project">
|
||||
<div class="tile">
|
||||
{% if project.image %}
|
||||
<div class="project-image" style="background-image: url({{ project.image.url }})">
|
||||
<div class="tile-image" style="background-image: url({{ project.image.url }})">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="project-image">
|
||||
<img class="project-default-image" src="{% static "imgs/project.svg" %}" />
|
||||
<div class="tile-image">
|
||||
<img class="tile-default-image" src="{% static "imgs/project.svg" %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="project-info">
|
||||
<h4 class="project_experiment_name">{{ project.name }}</h4>
|
||||
<h5 class="project_experiment_count">{{ project.experiments.count }} experiment{{ project.experiments.count|pluralize }}</h5>
|
||||
<div class="tile-info">
|
||||
<h4 class="tile-name">{{ project.name }}</h4>
|
||||
<h5 class="tile-subheader">{{ project.experiments.count }} experiment{{ project.experiments.count|pluralize }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче