diff options
Diffstat (limited to 'static/website')
| -rw-r--r-- | static/website/css/main.css | 48 | ||||
| -rw-r--r-- | static/website/templates/filter.html | 3 | ||||
| -rw-r--r-- | static/website/templates/index.html | 61 | ||||
| -rw-r--r-- | static/website/templates/latest_question.html | 11 | ||||
| -rw-r--r-- | static/website/templates/new-question.html | 8 |
5 files changed, 73 insertions, 58 deletions
diff --git a/static/website/css/main.css b/static/website/css/main.css index ae785bc..4726635 100644 --- a/static/website/css/main.css +++ b/static/website/css/main.css @@ -12,23 +12,6 @@ hr { .navbar-default { margin-bottom: 0; } -.carousel, .slick-list { - height: 100px; - margin-right: -2px; -} -.carousel .item { - border: 1px solid #333333; - position: relative; -} -.carousel .thumb { - text-align: center; - height: 75px; -} -.carousel .descp { - position: absolute; - bottom: 0; - width: 100%; -} #filter-container { background: #f5f5f5; padding: 15px; @@ -340,3 +323,34 @@ table .title a { .slick-prev:after { color: #a26dc8; } +.carousel, .slick-list { + height: 245px; + margin-right: -2px; +} +.carousel .thumbnail { + width: 97%; + height: 245px; + border: 1px solid #cccccc; +} +.carousel .thumbnail img { + height: 100px; +} +.carousel .caption .category { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-align: center; +} +.carousel .caption .latest { + display: block; + padding: 5px 0 5px 0; + border-top: 1px solid #cccccc; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-align: center; +} +.carousel .caption .btn { + margin-top: 7px; +} diff --git a/static/website/templates/filter.html b/static/website/templates/filter.html index dada403..7496c0c 100644 --- a/static/website/templates/filter.html +++ b/static/website/templates/filter.html @@ -70,7 +70,10 @@ <b> > </b> {{ second_range }} sec {% endif %} + <a class="btn btn-xs btn-success pull-right" href="{% url 'website:new_question' %}?category={{ category|urlencode }}">Ask a new question.</a> </h5> +<br> +<div class="clearfix"></div> <table class="table table-striped table-bordered"> <th> FOSS </th> diff --git a/static/website/templates/index.html b/static/website/templates/index.html index 95c8500..991c777 100644 --- a/static/website/templates/index.html +++ b/static/website/templates/index.html @@ -1,45 +1,33 @@ {% extends 'website/templates/base.html' %} {% load static %} {% load count_tags %} +{% load notify %} {% block content %} <div id="carousel-container"> - <div class="row"> - <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> - <div class="carousel"> - {% for category in categories %} - <div class="item"> - <div class="thumb"> - <img data-lazy="{% static "website/images/" %}{{ category }}.jpg" height="75px" width="99px"> - </div> - <div class="descp"> - <a class="btn btn-block btn-default btn-sm vs" href="{% url 'website:filter' category %}">{{ category }}</a> + <div class="carousel"> + {% for category in categories %} + <div> + <div class="thumbnail"> + <img src="{% static 'website/images/' %}{{ category }}.jpg"> + <div class="caption"> + <small class="category"> + {{ category }} + </small> + {% latest_question category %} + <a class="btn btn-xs btn-block btn-success" href="{% url 'website:new_question' %}?category={{ category|urlencode }}">Ask new question</a> </div> - </div> <!-- /.item --> - {% endfor %} - </div> <!-- /.carousel --> - </div> <!-- /.col --> - </div> <!-- /.row --> - </div> + </div> + </div> + {% endfor %} + </div> <!-- /.carousel --> + </div> <!-- /#carousel-container --> <div id="filter-container"> <div class="row"> <form class ="" id="filter-form" action="" role="form"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> - <h3>Filter questions . . .</h3> - <div class="row"> - <div class="form-group col-lg-10 col-md-10 col-sm-10 col-xs-10"> - <select id="filter-select" class="form-control"> - <option value="-1">Select a FOSS category</option> - {% for category in categories %} - <option value="{{ category }}">{{ category }}</option> - {% endfor %} - </select> - </div> <!-- /.form-group, .col --> - <div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2"> - <input class="btn btn-primary btn-block" type="submit" value="Go"> - </div> <!-- /.form-group, .col --> - </div> + <a class="btn btn-block btn-primary" href="{% url 'website:questions' %}" style="margin-top: 30px;">View all previous questions.</a> </div> <!-- /.col --> </form> <div class="col-lg-6 col-md-6 col-sm-6"> @@ -57,15 +45,10 @@ </div> <!-- /.row --> </div> <!-- /#filter-container --> - <br> +<br> <div class="panel panel-default"> <div class="panel-heading"> Recent questions - <a class="pull-right" href="{% url 'website:questions' %}"> - <small> - View all questions - </small> - </a> </div> <div class="panel-body"> <table class="table table-bordered table-hover"> @@ -157,9 +140,9 @@ dots: false, touchMove: false, draggable: false, - slidesToShow: 8, - slidesToScroll: 3, - speed: 500, + slidesToShow: 4, + slidesToScroll: 1, + speed: 1000, autoplay: true, autoplaySpeed: 1000, }); diff --git a/static/website/templates/latest_question.html b/static/website/templates/latest_question.html new file mode 100644 index 0000000..5279f19 --- /dev/null +++ b/static/website/templates/latest_question.html @@ -0,0 +1,11 @@ +{% if question %} + <small class="latest"> + <a href="{% url 'website:get_question' question.id %}">{{ question.title }}</a> + </small> + <a class="btn btn-xs btn-block btn-primary" href="{% url 'website:filter' question.category %}">View previous questions</a> +{% else %} + <small class="latest"> + Be the first to ask question. + </small> + <a class="btn btn-xs btn-block btn-primary" disabled="disabled" href="#">View previous questions</a> +{% endif %} diff --git a/static/website/templates/new-question.html b/static/website/templates/new-question.html index d9576bb..16c6021 100644 --- a/static/website/templates/new-question.html +++ b/static/website/templates/new-question.html @@ -11,7 +11,7 @@ {% with WIDGET_ERROR_CLASS='field_error' %} <p> - Please enter the tutorial details. + Please enter the tutorial details. {{ category }} <img id="ajax-loader" src="{% static 'website/images/ajax-loader.gif' %}" style="display:none;"> </p> <div class="row"> @@ -19,7 +19,11 @@ {% render_field form.category class+="form-control"%} </div> <div class="col-lg-3 col-md-3 col-sm-3"> - {% render_field form.tutorial class+="form-control" disabled="disabled" %} + {% if category %} + {% render_field form.tutorial class+="form-control" %} + {% else %} + {% render_field form.tutorial class+="form-control" disabled="disabled" %} + {% endif %} </div> <div class="col-lg-2 col-md-2 col-sm-2"> {% render_field form.minute_range class+="form-control" disabled="disabled" %} |