Added features
the build was successful
Details
the build was successful
Details
This commit is contained in:
parent
9a9423c104
commit
7b88e76f99
|
@ -2,11 +2,124 @@
|
|||
title: "Features"
|
||||
date: 2018-10-13T21:59:47+02:00
|
||||
draft: false
|
||||
type: "page"
|
||||
type: "features"
|
||||
menu:
|
||||
page:
|
||||
title: "Features"
|
||||
weight: 20
|
||||
---
|
||||
|
||||
# Features
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<h1>Features</h1>
|
||||
<p>Vikunja is a TODO-List app. Think of it like the notebook you have with all your things to keep track of, but better.</p>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column theimage">
|
||||
<img src="lists.png" alt="Lists"/>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<h2>Lists</h2>
|
||||
|
||||
<p>First things first: Vikunja can create lists. And yes, you can add tasks to a list. But it can do so much more
|
||||
<i>(or at least, it will be able to do a lot more at <a href="#roadmap">some point</a>)</i>.</p>
|
||||
|
||||
<h2>Namespaces</h2>
|
||||
|
||||
<p>A... what? A namespace is something like a group of lists. Every list is part of a particular namespace which you can then share
|
||||
or simply use as a method to keep track of multiple lists more easily.</p>
|
||||
|
||||
<h2>Tasks</h2>
|
||||
|
||||
<p>Tasks are not only simple tasks. You can let Vikunja remind you of tasks when they're due. Never miss an important deadline again!</p
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<h2>Sharing</h2>
|
||||
|
||||
<p>
|
||||
Ever wished you could just share that grocery list with your roomate instead of having to send dozens of texts on your way to the supermarket?
|
||||
With Vikunja, you can. Simply share a list or a namespace with all its lists to another user.
|
||||
Don't want your roommate to add new things to the grocery list and only do the shopping?
|
||||
You can also share a list with _read-only_ access!</p>
|
||||
|
||||
<p>
|
||||
Planning a bigger thing? You can use teams to share a list or namespace with multiple people at a time!
|
||||
</p>
|
||||
</div>
|
||||
<div class="column theimage">
|
||||
<img src="sharing-user.png" alt="Sharing with a user" style="margin-top:3em"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### CalDAV
|
||||
|
||||
Ever discovered that web app with all its great features, but somewhat... not good to use? Not to say [our app](https://vikunja.io/download) is not easy to
|
||||
use - but you don't have to use it! Vikunja comes with a calDAV-integration which lets you use the tools you already use and love.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="hero is-medium is-warning is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Can't wait to see it in action?
|
||||
</h1>
|
||||
<a href="http://try.vikunja.io" class="button is-success">Try it</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="container" style="margin-top:1.5em">
|
||||
<div class="content">
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<h2>Self-Hosted</h2>
|
||||
|
||||
<p>Use Vikunja on your own server or hosted*. Your data will always be yours we won't sell your grocery list to Amazon. Don't trust us?
|
||||
<a href="http://code.vikunja.io">Check for yourself</a>.</p>
|
||||
|
||||
<p>Also, did I mention "the cloud"? Vikunja syncs across all your devices, no matter if you created a task on the mobile app or on your laptop, enabling
|
||||
you to continue where you left off.
|
||||
<br/>
|
||||
<small style="color:#636363">\* We don't have any stable hosted instances of Vikunja available, yet.</small>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<h2>Open-Source</h2>
|
||||
|
||||
<p>Vikunja is completly open source and released under the <a href="http://code.vikunja.io/api/src/branch/master/LICENSE">LGPLv3</a>.</p>
|
||||
|
||||
<p>You can contribute in multiple ways, even if you're not a developer! It already helps a lot when you use Vikunja and report
|
||||
<a href="http://code.vikunja.io/api/issues">features you'd like or bugs you find</a>.</p>
|
||||
|
||||
<p>And if you are a developer and know your way around <a href="http://code.vikunja.io/api">Go</a> or
|
||||
<a href="http://code.vikunja.io/frontend">Vue.js</a> any help is appreceated.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Roadmap
|
||||
|
||||
But of course, there's more to come! Take a look at this list of things we've planned to add:
|
||||
|
||||
* Labels for todo lists and tasks
|
||||
* Prioritize tasks
|
||||
* Assign users to tasks
|
||||
* Subtasks
|
||||
* Repeating tasks
|
||||
* Attachments on tasks
|
||||
* Get all tasks for you per interval (day/month/period)
|
||||
* More sharing features
|
||||
* Share via a world-readable link with or without password, like Nextcloud
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
Binary file not shown.
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
|
@ -0,0 +1,8 @@
|
|||
{{ partial "header.html" . }}
|
||||
{{ partial "navbar.html" . }}
|
||||
|
||||
<div class="features">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
{{ partial "footer.html" . }}
|
|
@ -172,3 +172,88 @@ h1, h2, h3, h4, h5, h6 {
|
|||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/// Test if `$value` is a valid direction
|
||||
/// @param {*} $value - Value to test
|
||||
/// @return {Bool}
|
||||
@function is-direction($value) {
|
||||
$is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
|
||||
$is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
|
||||
|
||||
@return $is-keyword or $is-angle;
|
||||
}
|
||||
|
||||
/// Convert a direction to legacy syntax
|
||||
/// @param {Keyword | Angle} $value - Value to convert
|
||||
/// @require {function} is-direction
|
||||
/// @require {function} convert-angle
|
||||
/// @throw Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.;
|
||||
@function legacy-direction($value) {
|
||||
@if is-direction($value) == false {
|
||||
@error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
|
||||
}
|
||||
|
||||
$conversion-map: (
|
||||
to top : bottom,
|
||||
to top right : bottom left,
|
||||
to right top : left bottom,
|
||||
to right : left,
|
||||
to bottom right : top left,
|
||||
to right bottom : left top,
|
||||
to bottom : top,
|
||||
to bottom left : top right,
|
||||
to left bottom : right top,
|
||||
to left : right,
|
||||
to left top : right bottom,
|
||||
to top left : bottom right
|
||||
);
|
||||
|
||||
@if map-has-key($conversion-map, $value) {
|
||||
@return map-get($conversion-map, $value);
|
||||
}
|
||||
|
||||
@return 90deg - $value;
|
||||
}
|
||||
|
||||
/// Mixin printing a linear-gradient
|
||||
/// as well as a plain color fallback
|
||||
/// and the `-webkit-` prefixed declaration
|
||||
/// @access public
|
||||
/// @param {Keyword | Angle} $direction - Linear gradient direction
|
||||
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
|
||||
@mixin linear-gradient($direction, $color-stops...) {
|
||||
|
||||
@if is-direction($direction) == false {
|
||||
$color-stops: $direction, $color-stops;
|
||||
$direction: 180deg;
|
||||
}
|
||||
|
||||
background: nth(nth($color-stops, 1), 1);
|
||||
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
|
||||
background: linear-gradient($direction, $color-stops);
|
||||
}
|
||||
|
||||
// Features page
|
||||
.features{
|
||||
@include linear-gradient(180deg, $primary, lighten($green, 15%));
|
||||
|
||||
h1,h2,h3,&{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a{
|
||||
color: lighten($dark, 10%);
|
||||
}
|
||||
|
||||
.column{
|
||||
|
||||
}
|
||||
|
||||
.column.theimage {
|
||||
text-align: center;
|
||||
|
||||
img{
|
||||
box-shadow: .4em .4em 1em lighten($dark, 15%);
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue