EbookFoundation
/
regluit
mirror of https://github.com/EbookFoundation/regluit.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

implement sass for only pledge.css

pull/46/head
eric 2017-12-12 13:26:01 -05:00
parent 76dc6d010c
commit 877affd8bf
11 changed files with 571 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/templates/base.html
View File

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
{% load truncatechars %} {% load truncatechars %}
{% load sass_tags %}
<html> <html>
<head> <head>
@ -10,8 +9,6 @@
<link type="text/css" rel="stylesheet" href="/static/css/sitewide4.css" /> <link type="text/css" rel="stylesheet" href="/static/css/sitewide4.css" />
<link REL="SHORTCUT ICON" HREF="/static/images/favicon.ico"> <link REL="SHORTCUT ICON" HREF="/static/images/favicon.ico">
{% block extra_css %}{% endblock %} {% block extra_css %}{% endblock %}
<link href="{% sass_src 'scss/global.scss' %}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{ jquery_home }}"></script> <script type="text/javascript" src="{{ jquery_home }}"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/sitewide1.js"></script> <script type="text/javascript" src="/static/js/sitewide1.js"></script>

3
frontend/templates/basepledge.html
View File

@ -1,8 +1,9 @@
{% extends "registration/registration_base.html" %} {% extends "registration/registration_base.html" %}
{% load sass_tags %}
{% block extra_css %} {% block extra_css %}
<link type="text/css" rel="stylesheet" href="/static/css/campaign2.css" /> <link type="text/css" rel="stylesheet" href="/static/css/campaign2.css" />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" /> <link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}

3
frontend/templates/manage_account.html
View File

@ -1,9 +1,10 @@
{% extends 'basedocumentation.html' %} {% extends 'basedocumentation.html' %}
{% load sass_tags %}
{% block title %}Your Unglue.it Account{% endblock %} {% block title %}Your Unglue.it Account{% endblock %}
{% block extra_extra_head %} {% block extra_extra_head %}
{{ block.super }} {{ block.super }}
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" /> <link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
{% include "stripe_stuff.html" %} {% include "stripe_stuff.html" %}
<script> <script>

4
frontend/templates/pledge_complete.html
View File

@ -1,12 +1,14 @@
{% extends 'basepledge.html' %} {% extends 'basepledge.html' %}
{% load humanize %} {% load humanize %}
{% load sass_tags %}
{% block title %}Pledge Completed{% endblock %} {% block title %}Pledge Completed{% endblock %}
{% block extra_extra_head %} {% block extra_extra_head %}
<link type="text/css" rel="stylesheet" href="/static/css/searchandbrowse2.css" /> <link type="text/css" rel="stylesheet" href="/static/css/searchandbrowse2.css" />
<link type="text/css" rel="stylesheet" href="/static/css/book_panel2.css" /> <link type="text/css" rel="stylesheet" href="/static/css/book_panel2.css" />
<link type="text/css" rel="stylesheet" href="/static/css/pledge.css" /> <link type="text/css" rel="stylesheet" href="{% sass_src 'scss/pledge.scss' %}" />
<script src="/static/js/slides.min.jquery.js"></script> <script src="/static/js/slides.min.jquery.js"></script>
<script src="/static/js/slideshow.js"></script> <script src="/static/js/slideshow.js"></script>

2
frontend/templates/work.html
View File

@ -4,7 +4,6 @@
{% load humanize %} {% load humanize %}
{% load purchased %} {% load purchased %}
{% load lib_acqs %} {% load lib_acqs %}
{% load sass_tags %}
{% block title %}&#151; {% block title %}&#151;
{% if work.is_free %} {% if work.is_free %}
{{ work.title }} is a Free eBook. {% for fmt in work.formats %}[{{ fmt }}]{% endfor %} {{ work.title }} is a Free eBook. {% for fmt in work.formats %}[{{ fmt }}]{% endfor %}
@ -19,7 +18,6 @@
<link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen"> <link rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen">
{{ kwform.media.css }} {{ kwform.media.css }}
{% endif %} {% endif %}
<link href="{% sass_src 'scss/bookview.scss' %}" rel="stylesheet" type="text/css" />
{% endblock %} {% endblock %}
{% block extra_js %} {% block extra_js %}

6
requirements_versioned.pip
View File

@ -104,6 +104,6 @@ setuptools==25.0.0
urllib3==1.16 urllib3==1.16
beautifulsoup4==4.6.0 beautifulsoup4==4.6.0
RISparser==0.4.2 RISparser==0.4.2
libsass libsass==0.13.4
django-compressor django-compressor==2.2
django-sass-processor django-sass-processor==0.5.6

4
settings/common.py
View File

@ -188,11 +188,9 @@ INSTALLED_APPS = (
) )
SASS_PROCESSOR_INCLUDE_DIRS = [ SASS_PROCESSOR_INCLUDE_DIRS = [
os.path.join(PROJECT_DIR),
os.path.join(PROJECT_DIR, 'static', 'scss'), os.path.join(PROJECT_DIR, 'static', 'scss'),
os.path.join('static', 'scss'),
] ]
SASS_PROCESSOR_AUTO_INCLUDE = False
# A sample logging configuration. The only tangible logging # A sample logging configuration. The only tangible logging
# performed by this configuration is to send an email to # performed by this configuration is to send an email to

3
static/scss/bookview.scss
View File

@ -1,3 +0,0 @@
* {
color: pink !important;
}

3
static/scss/global.scss
View File

@ -1,3 +0,0 @@
* {
color: red ;
}

326
static/scss/pledge.scss Normal file
View File

@ -0,0 +1,326 @@
@import "variables.scss";
#content-block .jsmod-content, .book-detail {
float: left;
width: auto;
}
input[type="submit"], a.fakeinput {
float: right;
font-size: $font-size-header;
margin: 10px 0 10px;
cursor: pointer;
}
.pledge_amount {
padding: 10px;
font-size: $font-size-header;
background: $pale-blue;
&.premium_level {
margin-top: 3px;
}
}
form.pledgeform {
width: 470px;
}
#id_preapproval_amount {
width: 50%;
line-height: 30px;
font-size: $font-size-larger;
}
ul.support li, ul.support li:hover {
background-image: none;
}
p {
margin: 7px auto;
}
.jsmodule.pledge {
margin: auto;
.jsmod-content {
float: right !important;
}
}
.modify_notification {
width: 452px;
margin-bottom: 7px;
border: solid 2px $blue-grey;
@include one-border-radius(5px);
padding: 7px;
h4 {
margin: 0 0 5px 0;
}
}
.cancel_notice {
width: 470px;
padding: 5px;
margin-top: 10px;
}
#fakepledgesubmit {
background-color: $alert;
cursor: default;
font-weight: bold;
font-size: $font-size-header;
display: none;
}
span.menu-item-price {
float: none !important;
}
ul#offers_list li {
div.on {
display: block;
background: $pale-blue;
margin-top: 1em;
.give_label {
padding: 4px;
color: black;
}
}
div.off {
display: none;
}
input[type=text], textarea {
width: 95%;
font-size: $font-size-larger;
color: $text-blue;
margin: 0 10px 5px 5px;
}
input[type=text]{
@include height($font-size-larger*1.3);
}
}
#mandatory_premiums {
font-size: $font-size-larger;
div {
float: left;
&.ack_level {
width: 16%;
margin-right: 3%;
height: 100%;
padding: 1%;
}
&.ack_header {
width: 73%;
padding: 1%;
}
&.ack_active, &.ack_inactive {
width: 100%;
font-size: $font-size-default;
}
&.ack_active {
.ack_header, .ack_level {
border: solid $text-blue;
border-width: 1%;
background: white;
}
}
&.ack_inactive {
.ack_header, .ack_level {
border: solid $blue-grey;
border-width: 1%;
background: $blue-grey;
}
input, textarea {
background: $blue-grey;
border: dashed 1px $text-blue;
}
}
}
> div {
margin: 7px 0;
}
input[type=text], textarea {
width: 95%;
font-size: $font-size-larger;
color: $text-blue;
margin: 5px 0;
}
input[type=text] {
@include height($font-size-larger*1.3);
}
}
#id_ack_link {
border: none;
cursor: default;
}
.fund_options {
a.fakeinput {
font-size: $font-size-header;
margin: 10px auto;
float: left;
line-height: normal;
}
input[type="submit"] {
float: left;
}
div {
width: 50%;
float: left;
ul {
background: $pale-blue;
}
&.highlight {
ul {
border-color: $medium-blue-grey;
background: white;
}
color: $dark-green;
}
}
ul {
padding: 5px 10px 5px 15px;
border: solid 1px $blue-grey;
margin-right: 15px;
list-style-type: none;
li {
margin: 5px 0;
}
a {
color: $medium-blue;
}
}
}
#authorize {
&.off {
display: none;
}
border: 3px solid $blue-grey;
@include one-border-radius(5px);
margin-top: 10px;
padding: 10px;
div.innards {
input[type="text"],input[type="password"] {
font-size: $font-size-larger;
line-height: $font-size-larger*1.5;
border-width: 2px;
padding: 1% 1%;
margin: 1% 0;
color: $text-blue;
&:disabled {
border-color: white;
}
&.address, &#card_Number, &#id_email {
width: 61%;
}
}
label {
width: 31%;
float: left;
line-height: $font-size-larger*1.5;
font-size: $font-size-larger;
border: solid white;
border-width: 2px 0;
padding: 1% 2% 1% 0;
margin: 1% 0;
text-align: right;
}
.form-row span {
float: left;
line-height: $font-size-larger*1.5;
font-size: $font-size-larger;
margin: 1%;
padding: 1% 0;
}
}
.cvc {
position: relative;
z-index: 0;
}
#cvc_help {
font-style: italic;
float: none;
font-size: $font-size-default;
color: $link-color;
cursor: pointer;
}
#cvc_answer {
display: none;
z-index: 100;
border: 2px solid $blue-grey;
@include one-border-radius(5px);
margin: 1% 0;
padding: 1%;
width: 46%;
position: absolute;
top: 90%;
right: 0;
opacity: 1;
background-color: white;
img {
float: right;
margin-left: 5px;
}
}
}
.payment-errors {
display: none;
@include errors;
@include one-border-radius(16px);
width: auto;
margin: auto;
}
span.level2.menu.answer {
border-left: solid 7px $pale-blue;
a {
font-size: $font-size-larger;
}
}
#anonbox {
margin-top: 10px;
background: $pale-blue;
float: left;
width: 48%;
padding: 1%;
&.off {
display: none;
}
}

234
static/scss/variables.scss Normal file
View File

@ -0,0 +1,234 @@
/* variables and mixins used in multiple less files go here */
$text-blue: #3d4e53;
$medium-blue: #6994a3;
$medium-blue-grey: #a7c1ca;
$pale-blue: #edf3f4;
$green: #8dc63f;
$call-to-action: #8dc63f;
$dark-green: #73a334;
$dark-blue: #37414d;
$blue-grey: #d6dde0;
$bright-blue: #8ac3d7;
$alert: #e35351;
$orange: #e18551;
$yellow: #efd45e;
$image-base: "/static/images/";
$background-header: "${image-base}bg.png";
$background-body: "${image-base}bg-body.png";
$background-booklist: "${image-base}booklist/bg.png";
$font-size-default: 13px;
$font-size-larger: 15px;
$font-size-header: 19px;
$font-size-shout: 22px;
$link-color: #6994a3;
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 46.7%); // #777
$gray-lighter: lighten($gray-base, 93.5%); // #eee
$brand-primary: darken(#428bca, 6.5%); // #337ab7
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%);
//** Link hover decoration.
$link-hover-decoration: underline;
$font-size-base: 14px;
$font-size-large: ceil(($font-size-base * 1.25)); // ~18px
$font-size-small: ceil(($font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429; // 20/14
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor(($font-size-base * $line-height-base)); // ~20px
//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-base-vertical: 6px;
$padding-base-horizontal: 12px;
$padding-large-vertical: 10px;
$padding-large-horizontal: 16px;
$padding-small-vertical: 5px;
$padding-small-horizontal: 10px;
$padding-xs-vertical: 1px;
$padding-xs-horizontal: 5px;
$line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
$line-height-small: 1.5;
$border-radius-base: 4px;
$border-radius-large: 6px;
$border-radius-small: 3px;
//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.
$btn-font-weight: normal;
$btn-default-color: #333;
$btn-default-bg: #fff;
$btn-default-border: #ccc;
$btn-primary-color: #fff;
$btn-primary-bg: $brand-primary;
$btn-primary-border: darken($btn-primary-bg, 5%);
$btn-success-color: #fff;
$btn-success-bg: $brand-success;
$btn-success-border: darken($btn-success-bg, 5%);
$btn-info-color: #fff;
$btn-info-bg: $brand-info;
$btn-info-border: darken($btn-info-bg, 5%);
$btn-warning-color: #fff;
$btn-warning-bg: $brand-warning;
$btn-warning-border: darken($btn-warning-bg, 5%);
$btn-danger-color: #fff;
$btn-danger-bg: $brand-danger;
$btn-danger-border: darken($btn-danger-bg, 5%);
$btn-link-disabled-color: $gray-light;
//** Disabled cursor for form controls and buttons.
$cursor-disabled: not-allowed;
.header-text {
display:block;
text-decoration:none;
font-weight:bold;
letter-spacing: -.05em;
}
@mixin border-radius($topleft, $topright, $bottomright, $bottomleft)
{
-moz-border-radius: $arguments;
-webkit-border-radius: $arguments;
border-radius: $arguments;
}
@mixin one-border-radius($radius)
{
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
.panelborders {
border-width: 1px 0px;
border-style: solid none;
border-color: #FFFFFF;
}
@mixin navigation-arrows($x, $y)
{
background:url($background-booklist) $x $y no-repeat;
width:10px;
height:15px;
display:block;
text-indent:-10000px;
}
@mixin supporter-color-span($hex, $color)
{
$url: %("%sheader-button-%s.png", $image-base, $color);
background:$hex url($url) left bottom repeat-x;
}
.roundedspan {
border:1px solid #d4d4d4;
@include one-border-radius(7px);
padding:1px;
color:#fff;
margin:0 8px 0 0;
display:inline-block;
> span {
padding:7px 7px;
min-width:15px;
@include one-border-radius(5px);
text-align:center;
display:inline-block;
.hovertext {
display: none;
}
&:hover .hovertext {
display: inline;
}
}
}
@mixin height($x)
{
height:$x;
line-height:$x;
}
.mediaborder {
padding: 5px;
border: solid 5px #EDF3F4;
}
.actionbuttons {
width: auto;
@include height(36px);
background: $call-to-action;
border: 1px solid transparent;
color: white;
cursor: pointer;
font-size: 13px;
font-weight: $btn-font-weight;
padding: 0 15px;
margin: 5px 0;
}
@mixin errors()
{
@include one-border-radius(16px);
border: solid $alert 3px;
clear: both;
width: 90%;
height: auto;
line-height: 16px;
padding: 7px 0;
font-weight: bold;
font-size: 13px;
text-align: center;
li {
list-style: none;
border: none;
}
}
@mixin clickyarrows()
{
text-indent:-10000px;
font-size:0;
width:15px;
height:22px;
display:block;
position:absolute;
top:45%;
}