refactor: refactor for modern layout

- split frontend and backend.
- update backend with modern Python dev strategies.

frontend/static/css/admin.css

@@ -0,0 +1,62 @@
+div.user-item {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+div.user-item-words {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.user-item-icon {
+    margin-left: 0.75rem;
+}
+
+
+
+
+div.token-item {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+div.token-item-words {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.token-item-icon {
+    margin-left: 0.75rem;
+}
+
+
+
+
+div.control-list {
+    display: flex; 
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+div.control-list > * {
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+}

frontend/static/css/calendar.css

@@ -0,0 +1,159 @@
+#ccn-calendar-calendarBody > div:nth-child(n+2) > div {
+    border-top: 0 solid black;
+    border-left: 0 solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+
+    padding: 0.75em;
+
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+
+    overflow: hidden;
+}
+
+#ccn-calendar-calendarBody > div:nth-child(n+2) > div:nth-child(1) {
+    border-left: 1px solid black;
+}
+
+#ccn-calendar-calendarBody > div:nth-child(2) > div {
+    border-top: 1px solid black;
+}
+
+#ccn-calendar-calendarBody > div > div {
+    flex-grow: 1;
+    flex-basis: 0;
+    flex-shrink: 0;
+
+    overflow: hidden;
+}
+
+#ccn-calendar-calendarBody > div > div[isCurrentMonth=false] {
+    background: #d0d0d0;
+}
+
+#ccn-calendar-calendarBody > div {
+    display: flex;
+    flex-flow: row;
+}
+
+
+
+
+
+
+div.calendarItem-eventBox {
+    border: 1px solid black;
+    border-radius: 2px;
+    margin-top: 0.2rem;
+    height: 0.75rem;
+    width: 100%;
+}
+
+div.calendarItem-eventBox[enableDisplay=true] {
+    visibility: visible;
+}
+div.calendarItem-eventBox[enableDisplay=false] {
+    visibility: hidden;
+}
+
+
+
+
+
+div.schedule-day {
+    display: flex;
+    flex-flow: column;
+}
+
+div.schedule-day-words {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+div.schedule-event-list {
+    display: flex;
+    flex-flow: column;
+}
+
+div.schedule-event-outter {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    margin-bottom: 1.25rem;
+}
+
+div.schedule-event-inner {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+    
+    padding: 1.25rem;
+}
+
+div.schedule-event-words {
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.schedule-event-icon {
+    margin-left: 0.75rem;
+}
+
+div.schedule-event-color {
+    width: 0.75rem; 
+    height: 100%;
+}
+
+#ccn-calendar-scheduleList div.schedule-day:nth-child(n+2) {
+    border-top: 1px solid rgba(219,219,219,.5);
+}
+
+
+
+
+
+div.collection-item {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+div.collection-item-words {
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.collection-item-icon {
+    margin-left: 0.75rem;
+}
+
+
+
+
+
+
+
+div.control-list {
+    display: flex; 
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+div.control-list > * {
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+    margin-left: 0 !important;
+}

frontend/static/css/collection.css

@@ -0,0 +1,34 @@
+div.collection-item {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+div.collection-item-words {
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.collection-item-icon {
+    margin-left: 0.75rem;
+}
+
+
+
+
+div.control-list {
+    display: flex; 
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+div.control-list > * {
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+    margin-left: 0 !important;
+}

frontend/static/css/datetimepicker.css

@@ -0,0 +1,117 @@
+div.perfectTable {
+    display: flex;
+    flex-flow: column;
+}
+
+/*
+div.perfectTable > div > div:nth-child(1) {
+    border-left: 1px solid black;
+}
+
+div.perfectTable > div:nth-child(1) > div {
+    border-top: 1px solid black;
+}
+*/
+
+div.perfectTable > div > div {
+    /*border-top: 0 solid black;
+    border-left: 0 solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+
+    padding: 0.75em;*/
+
+    flex-grow: 1;
+    flex-basis: 0;
+    flex-shrink: 0;
+
+    overflow: hidden;
+
+    display: flex;
+    justify-content: center;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+div.perfectTable > div {
+    display: flex;
+    flex-flow: row;
+}
+
+div.perfectTable > div > div[picked=true] {
+    background: hsl(171, 100%, 41%);
+    color: #fff;
+}
+
+
+
+
+
+
+
+
+div.pickerContainer {
+    display: flex; 
+    align-items: center; 
+    flex-flow: row;
+    justify-content: center;
+}
+
+div.pickerContainer > div {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
+
+div.pickerContainer > svg {
+    width: 100%;
+    height: 100%;
+}
+
+div.pickerContainer > svg > text {
+    dominant-baseline: middle;
+    text-anchor: middle;
+    user-select: none;
+    cursor: default;
+}
+
+div.pickerContainer > svg > circle[type=background] {
+    stroke-width: 0;
+    fill: #d0d0d0;
+}
+
+div.pickerContainer > svg > circle[type=symbol] {
+    stroke-width: 0;
+    fill: hsl(171, 100%, 41%); /* $primary */
+}
+
+div.pickerContainer > svg > line {
+    stroke-width: 0.125em;
+    stroke: hsl(171, 100%, 41%); /* $primary */
+}
+
+
+
+
+
+
+header.pickerHeader {
+    display: flex;
+    flex-flow: row;
+
+    flex-grow: 0;
+    flex-basis: 0;
+    flex-shrink: 0;
+
+    justify-content: space-between;
+}
+
+header.pickerHeader > div {
+    display: flex;
+    flex-flow: column;
+
+    flex-grow: 1;
+    flex-basis: 0;
+    flex-shrink: 0;
+}

frontend/static/css/event.css

@@ -0,0 +1,17 @@
+div.control-list {
+    display: flex; 
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+div.control-list > * {
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+    margin-left: 0 !important;
+}
+
+
+
+#ccn-event-eventFormBody > section {
+    border-top: 1px solid rgba(219,219,219,.5);
+}

frontend/static/css/todo.css

@@ -0,0 +1,32 @@
+div.todo-item {
+    display: flex;
+    flex-flow: row;
+    align-items: flex-start;
+
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+div.todo-item-words {
+    flex-grow: 1;
+    flex-basis: 0;
+
+    word-break: break-all;
+}
+
+div.todo-item-icon {
+    margin-left: 0.75rem;
+}
+
+
+
+div.control-list {
+    display: flex; 
+    flex-flow: row;
+    flex-wrap: wrap;
+}
+
+div.control-list > * {
+    margin-right: 0.75rem;
+    margin-bottom: 0.75rem;
+}