From 2c4c9a98024df6db74d1f1e8ccc5b20d5e0615e7 Mon Sep 17 00:00:00 2001 From: coja Date: Thu, 18 Jan 2024 01:58:03 +0100 Subject: [PATCH 1/2] [FE] Design init --- README.md | 16 +++- taskmanager/static/style.css | 144 +++++++++++++++++++++++++++- taskmanager/templates/addtask.html | 37 +++++-- taskmanager/templates/index.html | 32 +++++-- taskmanager/templates/project.html | 59 ++++++++---- taskmanager/templates/register.html | 40 +++++--- 6 files changed, 270 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index d604909..746174e 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,21 @@ Interactive TODO list web application -# Use +# Development Setup -python3 ./run.py +install python and pip -# Install +```bash +pip install virtualenv +python -m venv venv #/path/to/new/virtual/environment +source venv/bin/activate #activate virtual env +pip install -r requirements.txt +python3 ./init_db.py #initialize database + +python3 ./run.py +``` + +# Build app cd build-deb/ make diff --git a/taskmanager/static/style.css b/taskmanager/static/style.css index 9f7f80b..1730efb 100644 --- a/taskmanager/static/style.css +++ b/taskmanager/static/style.css @@ -1,25 +1,36 @@ :root { --border-radus: 1rem; - --background: #000000; - --header-background: #FFFFFF; + --background: #383840; + --header-background: #212121; --header-height: 3rem; --input-bar-height: 3rem; + --white: #FFF; + --primary: #d2d2d2; + --font-primary: #d2d2d2; color: #FFF; } -body{ - background: var(--background); - font-family: sans-serif; +* { margin: 0; padding: 0; } +a, a:visited { + color: var(--font-primary); +} + +body { + background: var(--background); + font-family: sans-serif; +} + main { display: flex; flex-direction: column; align-self: flex-start; gap: 1rem; margin: 0 auto; + padding: 30px 0; height: calc(100vh - var(--header-height) - var(--input-bar-height)); box-sizing: border-box; } @@ -36,6 +47,12 @@ header { box-sizing: border-box; } +header ul { + display: flex; + list-style-type: none; + gap:15px +} + footer { width: 100vw; height: var(--input-bar-height); @@ -47,3 +64,120 @@ footer { box-sizing: border-box; gap: 1rem; } + +/* global classes */ +.container { + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 20px 30px; +} + +.page h1 { + margin-bottom: 15px; +} + +.btn-wrap { + display: flex; + align-items: center; + justify-content: center; + padding: 15px 12px; +} +.btn { + display: inline-block; + padding: 5px 20px; + border: 1px solid var(--primary); + color: var(--primary); + background-color: transparent; + border-radius: 5px; +} + +.btn:hover { + background-color: rgba(0,0,0,0.3); + cursor: pointer; +} + +.btn a { + text-decoration: none; +} + +.label { + text-transform: uppercase; + letter-spacing: 2px; + font-size: 14px; + font-weight: 600; + margin-bottom: 11px; + display: inline-block; + user-select: none; +} + +.underline { + border-bottom: 1px solid var(--font-primary); + padding-bottom: 2px; + margin-top:20px; +} + +.section-tasks > ul { + margin-left: 30px; +} + +/* page index*/ + +.page-index .btn{ + margin-bottom: 20px; +} + +.task-wrap { + border: 1px solid var(--primary); + padding: 20px 40px 40px 40px; + border-radius: 5px; + box-shadow: inset 0 0 9px 4px rgba(255,255,255, 0.1); +} + +.task { + display: flex; + border-bottom: 1px solid white; +} + +.task a:hover { + background-color: rgba(255,255,255,0.1); +} + +.task a { + display: flex; + gap: 15px; + width: 100%; + padding: 20px; + text-decoration: none; +} + +/* Page projects */ + +.page-project h1 { + text-transform: uppercase; +} + +.user-info-wrap{ + margin-bottom: 10px; +} + +/* form */ + +.form-wrap { + max-width: 400px; +} + +.form-input { + display: flex; + flex-direction: column; + padding: 10px 0; +} + +.form-input input { + height: 25px; + border-radius: 5px; + outline: none; +} + + + diff --git a/taskmanager/templates/addtask.html b/taskmanager/templates/addtask.html index 742d728..95fbd3f 100644 --- a/taskmanager/templates/addtask.html +++ b/taskmanager/templates/addtask.html @@ -1,19 +1,36 @@ - - + + + Add new task - -
-
- - - - - +
+ +
+
+

Create new task

+
+ +
+ + +
+
+ + +
+
+ +
+
diff --git a/taskmanager/templates/index.html b/taskmanager/templates/index.html index 2a769dd..3903bab 100644 --- a/taskmanager/templates/index.html +++ b/taskmanager/templates/index.html @@ -1,21 +1,37 @@ - - + + + Task manager -
+
-
+
- {% for task in tasks %} -
  • {{task.name}}
    • - {% endfor %} +
    + Add new task +
    +
    +

    Tasks

    + {% for task in tasks %} +
    + +
    {{task.id}}.
    +
    {{task.name}}
    +     +
    + {% endfor %} +
    -

    Add new task

    diff --git a/taskmanager/templates/project.html b/taskmanager/templates/project.html index 877234f..653c294 100644 --- a/taskmanager/templates/project.html +++ b/taskmanager/templates/project.html @@ -1,32 +1,51 @@ - - + + + {{task.name}} -
    +
    -
    -
    -
  • {{task.name}}
    • -
  • {{task.desc}}
    • +
    +
    +

    {{task.name}}

    + +

    {{task.desc}}

    +
    +
    +
    + + {% for user in users %} + + {% endfor %} +
    +
    + +
    +
    +
    + + +
    +
    + +
    +
    +
    +
    -

    Users added to this task

    - - {% for user in users %} -
  • {{user.username}}, {{user.contact}}
    • - {% endfor %} - -

    Add yourself to task

    -
    - - - -
    -
    diff --git a/taskmanager/templates/register.html b/taskmanager/templates/register.html index 280e593..6139916 100644 --- a/taskmanager/templates/register.html +++ b/taskmanager/templates/register.html @@ -1,20 +1,36 @@ - - - + + + + Register - -
    -
    - - - - - -
    +
    + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    From 8acbb02a2f38714a23f1f80306bc2bc54e4f4b88 Mon Sep 17 00:00:00 2001 From: coja Date: Thu, 18 Jan 2024 02:04:32 +0100 Subject: [PATCH 2/2] README update --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 746174e..02f7c81 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# taskmanager +# Task Manager Interactive TODO list web application # Development Setup -install python and pip +Install python and pip on local machine ```bash pip install virtualenv @@ -13,12 +13,14 @@ source venv/bin/activate #activate virtual env pip install -r requirements.txt python3 ./init_db.py #initialize database -python3 ./run.py +python3 ./run.py #run project ``` # Build app +```bash cd build-deb/ -make sudo apt install ./flaskapp.deb +make +```