diff --git a/README.md b/README.md index ccc8ee8..1665745 100644 --- a/README.md +++ b/README.md @@ -6,23 +6,16 @@ - OK rows: rings OR orbits - OK columns: sectors relates to angles. quadrants... cordinal points... > ARCS -- angles & distances: definir independientemte (a32; d453)? -- OK initial angle: importantes para saber desde donde empieza -- OK arc: importante para estabelcer tamano del arco 90° o 360° x ej. +- OK offset angle: importantes para saber desde donde empieza +- OK arc: importante para estabelcer tamano del arco 90° o 360° x ej. DESAMBIGUAR - OK Reverse angle... -- OK orbit alignment> lower upper +- OK orbit alignment> lower upper DEFAULT MIDDLE - OK Stationary- geostationary/gyroscope: comportamiento de lo selementos -- responsiveness: crear dos versiones? media query & vh vw units? ... -- OK layer para contenido dentro de los items. Todo lo referido a alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo qued aara el usuario o algo para armar especialemnte -- OK draw rings and sectors +- OK draw rings and ARCS - ~~Armar defaults~~ -- Abstraer variables de color, backgrpund etc -- separar grid, de otras cosas -- WIP armar progress en svg +- ~~WIP armar progress en svg~~ - ~~FIX offset~~ -- CHANGE NAMES - OK issue core.item angle -- add manual overrride of items-n - OK? Rings. permitir que cada ring tenga su ---radio pueda ser cmabiada por el usuario. Default que sea como hasta ahora - ARC BG: 1. OK (FALTA TESTEO) los rings tienen z-index el mas arriba siempre es el mas cercano al centro. (ver cóm osolucionar... porque es al reves, quizas ya setar en el css un orden de 10 a core y de ahi para abajo, o teneinedo en cta nro de rings...ESto :) @@ -37,8 +30,16 @@ Juices - - ~~ISSUE arc & arc-* same bug as items~~ +- angles & distances, ETC: definir independientemte (a32; d453)? TAMBIEN SIZES +- responsiveness: crear dos versiones? media query & vh vw units? ... +- layer para CONTENIDO ACOMODAR dentro de los items. Todo lo referido a alignment: ubicacion del elementos izq, centro, der; arriba medio, abajo qued aara el usuario o algo para armar especialemnte +- Abstraer variables de color, backgrpund etc +- separar grid, de otras cosas +- CHANGE NAMES AVOID CONFLICTS +- add manual overrride of items-n +- NEST ARCS +- ITEMS AND ARCS HARMONIC ## ELEMENTS @@ -46,70 +47,29 @@ - shapes: circle, box, rounded box, blob - sizes: xxl, xl, l, m, s, xs, xxs - alignemnt: upper, lower, middle -- arcs: radial columns. visual support with basic interactivity and some cool customizations (gap, width, radius). Should be nestable +- arcs: radial columns. visual support with basic interactivity and some cool customizations (gap, width, radius, POSITION). Should be nestable - rings: radial rows. visual support. Nestable - labels: item label with optional conector and predefined positions +- MODALS +- POPOVERS +- PROGRESS +- KNOB ## COMPONENTS - - progress casi OK - knob casi OK - ~~sectors svg~~ css arcs OK - modals - labels OK - tooltips +- ARC TEXT - cards - buttons - forms ## UTILITIES - -```js -function getEllipsePoints(width, height, n, dist) { - const a = width / 2; - const b = height / 2; - const points = []; - for (let i = 1; i <= n; i++) { - const angle = (360 / n) * i; - const radians = angle * (Math.PI / 180); - const x = a * Math.cos(radians) + dist; - const y = b * Math.sin(radians) + dist; - console.log('angle', angle, 'radians', radians, 'xy', x,y) - points.push({ x, y }); - } - return points; -} - -@property --angle { - syntax: ""; - initial-value: 1; - inherits: false; -} - -@keyframes progress { - 50% { - --angle: 360; - } -} - -.item, .label__text, .label__conector { - animation: 16s progress infinite; -} - -article::before { - content: attr(data-parent); -} - -You can also use the attribute selectors in CSS to change styles according to the data: - -article[data-columns="3"] { - width: 400px; -} -article[data-columns="4"] { - width: 600px; -} -``` +LAS MINIMAS ARC TEXT ### css first