Commit fe5c4574 authored by Artem Pianykh's avatar Artem Pianykh

init

parents
# Тестовое задание Laravel TO-DO
### Описание
Создать простое приложение для ведения задач. Верстка в репозитории ([preview](http://front.rexsoftproduction.com/laravel-todo/))
### Стек технологий:
- Laravel
- jQuery
- Ajax
### Задачи
- Реализовать возможность создавать категории.
- Реализовать возможность создавать, редактировать и удалять задачи. Каждой задаче можно назначить соответствующую категорию.
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
html,
body {
min-height: 100%;
}
.layout-boxed html,
.layout-boxed body {
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
overflow-x: hidden;
overflow-y: auto;
}
/* Layout */
.wrapper {
min-height: 100%;
position: relative;
overflow: hidden;
}
.wrapper:before,
.wrapper:after {
content: " ";
display: table;
}
.wrapper:after {
clear: both;
}
.layout-boxed .wrapper {
max-width: 1250px;
margin: 0 auto;
min-height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
position: relative;
}
.layout-boxed {
background: url('../img/boxed-bg.jpg') repeat fixed;
}
/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper,
.right-side,
.main-footer {
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
}
.layout-top-nav .content-wrapper,
.layout-top-nav .right-side,
.layout-top-nav .main-footer {
margin-left: 0;
}
@media (max-width: 767px) {
.content-wrapper,
.right-side,
.main-footer {
margin-left: 0;
}
}
@media (min-width: 768px) {
.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
margin-left: 0;
}
}
@media (max-width: 767px) {
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
}
}
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #ecf0f5;
z-index: 800;
}
.main-footer {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid #d2d6de;
}
/* Fixed layout */
.fixed .main-header,
.fixed .main-sidebar,
.fixed .left-side {
position: fixed;
}
.fixed .main-header {
top: 0;
right: 0;
left: 0;
}
.fixed .content-wrapper,
.fixed .right-side {
padding-top: 50px;
}
@media (max-width: 767px) {
.fixed .content-wrapper,
.fixed .right-side {
padding-top: 100px;
}
}
.fixed.layout-boxed .wrapper {
max-width: 100%;
}
body.hold-transition .content-wrapper,
body.hold-transition .right-side,
body.hold-transition .main-footer,
body.hold-transition .main-sidebar,
body.hold-transition .left-side,
body.hold-transition .main-header .navbar,
body.hold-transition .main-header .logo {
/* Fix for IE */
-webkit-transition: none;
-o-transition: none;
transition: none;
}
/* Content */
.content {
min-height: 250px;
padding: 15px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
/* H1 - H6 font */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: 'Source Sans Pro', sans-serif;
}
/* General Links */
a {
color: #3c8dbc;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
color: #72afd2;
}
/* Page Header */
.page-header {
margin: 10px 0 20px 0;
font-size: 22px;
}
.page-header > small {
color: #666;
display: block;
margin-top: 5px;
}
/* Widget: TODO LIST */
.todo-list {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}
.todo-list > li {
border-radius: 2px;
padding: 10px;
background: #f4f4f4;
margin-bottom: 2px;
border-left: 2px solid #e6e7e8;
color: #444;
}
.todo-list > li:last-of-type {
margin-bottom: 0;
}
.todo-list > li > input[type='checkbox'] {
margin: 0 10px 0 5px;
}
.todo-list > li .text {
display: inline-block;
margin-left: 5px;
font-weight: 600;
}
.todo-list > li .label {
margin-left: 10px;
font-size: 12px;
}
.todo-list > li .tools {
float: right;
color: #dd4b39;
}
.todo-list > li .tools > .fa,
.todo-list > li .tools > .glyphicon,
.todo-list > li .tools > .ion {
margin-right: 5px;
cursor: pointer;
}
.todo-list > li:hover .tools {
display: inline-block;
}
.todo-list > li.done {
color: #999;
}
.todo-list > li.done .text {
text-decoration: line-through;
font-weight: 500;
}
.todo-list > li.done .label {
background: #d2d6de !important;
}
.todo-list .danger {
border-left-color: #dd4b39;
}
.todo-list .warning {
border-left-color: #f39c12;
}
.todo-list .info {
border-left-color: #00c0ef;
}
.todo-list .success {
border-left-color: #00a65a;
}
.todo-list .primary {
border-left-color: #3c8dbc;
}
.todo-list .handle {
display: inline-block;
cursor: move;
margin: 0 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>To-Do List</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/theme.css">
</head>
<body>
<div class="container">
<!-- NAVBAR START -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">TO-DO List</a>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- CONTENT START -->
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading lead clearfix">
Categories
<button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#create_category_modal">
Create New Category
</button>
</div>
<div class="panel-body list-group">
<a href="#" class="list-group-item active">
<span class="badge">3</span>
All
</a>
<a href="#" class="list-group-item">
<span class="badge">1</span>
Category 1
</a>
<a href="#" class="list-group-item">
<span class="badge">1</span>
Category 2
</a>
<a href="#" class="list-group-item">
<span class="badge">1</span>
Category 3
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading lead clearfix">
Tasks
<button type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#create_task_modal">
Create New Task
</button>
</div>
<div class="panel-body">
<ul class="todo-list ui-sortable">
<li class="done">
<input type="checkbox" checked="checked" value="">
<span class="text">Complete test</span>
<small class="label label-danger">Category 1</small>
<div class="tools">
<i class="glyphicon glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-remove-circle"></i>
</div>
</li>
<li>
<input type="checkbox" value="">
<span class="text">Learn Laravel</span>
<small class="label label-danger">Category 2</small>
<div class="tools">
<i class="glyphicon glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-remove-circle"></i>
</div>
</li>
<li>
<input type="checkbox" value="">
<span class="text">Rule the world</span>
<span class="label label-success">Category 3</span>
<div class="tools">
<i class="glyphicon glyphicon glyphicon-pencil"></i>
<i class="glyphicon glyphicon-remove-circle"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- CONTENT END -->
</div>
<!-- CATEGORY MODAL START -->
<div id="create_category_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Create New Category</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>List Name</label>
<input type="text" class="form-control" placeholder="List Name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- CATEGORY MODAL END -->
<!-- TASK MODAL START -->
<div id="create_task_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Create New Task</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Task</label>
<input type="text" class="form-control" placeholder="Task">
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control">
<option>None</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- TASK MODAL END -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Markdown is supported
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