From edf258f9ea5f8b5676cbed9c70cd4147899ce4fc Mon Sep 17 00:00:00 2001 From: RuikangRPI Date: Fri, 27 Oct 2023 22:21:48 -0400 Subject: [PATCH 01/11] profile dropdown To be implemented as a django component. --- .DS_Store | Bin 0 -> 6148 bytes ACMAS/.DS_Store | Bin 0 -> 6148 bytes ACMAS/app/.DS_Store | Bin 0 -> 6148 bytes ACMAS/app/ACMAS_Web/.DS_Store | Bin 0 -> 6148 bytes ACMAS/app/ACMAS_Web/components/.DS_Store | Bin 0 -> 6148 bytes .../components/dropdown_profile/.DS_Store | Bin 0 -> 6148 bytes .../dropdown_profile/dropdown_profile.html | 0 .../dropdown_profile/dropdown_profile.py | 0 .../dropdown_profile/example/index.html | 99 ++++++++++++++++++ .../dropdown_profile/example/index.js | 43 ++++++++ .../dropdown_profile/example/style.css | 43 ++++++++ 11 files changed, 185 insertions(+) create mode 100644 .DS_Store create mode 100644 ACMAS/.DS_Store create mode 100644 ACMAS/app/.DS_Store create mode 100644 ACMAS/app/ACMAS_Web/.DS_Store create mode 100644 ACMAS/app/ACMAS_Web/components/.DS_Store create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/.DS_Store create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.html create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.js create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/example/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..93559cf7b3937dc04069df7c4ff0cea51c744b33 GIT binary patch literal 6148 zcmeHKU279T6upzCX44`DX`wH|g0H26%+?ly2Gjo=i$q!>Lpo! zpa@CaN6Lq{NfyhAFUMItRNPQ^I8~?Gt?f*wjf4GN_i4Q`+jXZ0jXL5d`?Fcq*?#!w z*-7_ndY;KkHD?kyo0Q!(cmv-N6jt;t9Av4?&d|z?`_SYSwJ4x2@HtAZx6$$jQHS>E zoZ`ZH$9i4Ci+bHNoDQAPG5KJ2fNeTj#ug85u`Bcf*-gx#O(6yIV+o#pajXq`twuRj zU-RA45q{p{RKW<4-@?}qmN81KMsXBWt*wXxW?wj)E3zKD46A@u;O{BG=YtDp^bF=2 z)zN`MJpq7aG%G{Q7a?<8gPy@$BYI#$Q-PW)%o9UsI@(>6=NZg3YB~w?_z-4fVO}Ug zjgH@URXPbzqb;ohR)Kj1)^xST_kZx`_y0V})~o_nft6A~lv`oT$CAw5y0AFDYhCy! qI2-5X8WjbFxsFx9SMd&98TwoffS$ozBU)hgkARZF7FL0Os=#kP(3klD literal 0 HcmV?d00001 diff --git a/ACMAS/.DS_Store b/ACMAS/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..3c463a14ddd0795604617923aad3ff26dd7d0bf2 GIT binary patch literal 6148 zcmeHK!A=`75FIC>*$677RV#6+v=Ubu(zHTCy(|F^y>=^lfGXW(S9Hr_N7WePf%7EO4#V;*rL0Jf88y&yl?*BGI2DuZY@2eP;#nA5ZMLf*2V%+Usidwy~ z^r-1Iy=CuH_(e^_aWtM3{b+Q+y$?#|@wFYr`&l|2w4d!LIgT=!j&wqnqzF0un8`#< z`)VSSLg$8Nz-xJ}L3?#J>uqhW`)|6v`MN*b>UCki-ki@{-t)DMx90)wt~3^)cB8K|3XoA3X<```bI zNv`J@a18uc42Z^VxZB5)?A>~6aeUYM(9cj7jw=oRNr9oSV#M-Qyb9FQy literal 0 HcmV?d00001 diff --git a/ACMAS/app/.DS_Store b/ACMAS/app/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a228b19a0b3bd5d0cd3078c5b16acbd7b1d03ab3 GIT binary patch literal 6148 zcmeHK%Wl&^6upzC)NWPD3y`|0WQlDRLO_)&Hg1|OSg^r}E&v6)F|Ad{6C8(7MUk?G zf8ZC`@+JHWD>!#%D(s|)9j(w@>CTzgnQNaJ&v=MPbSHy{L>>`2aK`2)l533H*;lM# zYFwaDV}wsLc^YRjUg>KqtO8bn+ou43yX$mFNAwJ7_50;5;Sk>XsZ2e(M-iRU5b2ou zR03nlC_$+Oe@|KE`)B^wCBFMR68I-z#&w3+{W~L`jz?yX`4*3|bX>OE-$i4sxqfHE z*>JX;H{rRQhGkSv#@(oR#ibWgX7N=%ieIM5wC~+Ll6e`Wc~U4sI!Msv^+}o!A+o$L)JNvsve0f6ss1?#%c6*+Hj`{G}F1a?Jb z+Xk=TGcwm`@gXeoOy*~3W#%UJNJ8%m=v2@HK% zzQp{o#B|lX=9tqnjL`!7vd(Dmb5&z`h>~E|Cy2tip^43_p`?#g*7<5ReW|P_3}@{I z6)>yQ*}B1Ju%WF2R)O280PhbzoG~!C(5SW!BeO6IqxWicrxpzOTBI2sGN%Dqt0;E3l@E9-sfmf4=|M zNw#DaunPQF3W#Pe>~--<=4@SgIX-KB_**y|_giRG6eQ+2RvA8uci_s<=5q!Z7+h#X R4b1)sC>d;G75JwL`~rHFum=DD literal 0 HcmV?d00001 diff --git a/ACMAS/app/ACMAS_Web/.DS_Store b/ACMAS/app/ACMAS_Web/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..39f6b384602a1741f2366962b4a3f8e6fc9dbf74 GIT binary patch literal 6148 zcmeHKO>fgM7=FE#HE9JZ5=grsMdCV*QqZJnmr}-oD@AYsRFWoa5ouf{=_*uJ>KXn6 ze}OB%g#W?`p4axIB+U>fguriQKaTypj^8K#sEJ677U6xO9uYZ6jI9o`2IF>4Tef3r zZUTksBc_5T_#M)Gi)|~c0#<>)O#xoJUA1OoN~yelKRiw3G)QCs25%3KkPd$+Ly5Np zpF*0!Cspgc&i_*5x51y|mp8G+of^ACQ=POB0!%p`CpldIz;KsMf6UcW}yIumh$KWqmq>!ZWRM zRpTA*yY3T%pTVoZx96`@`z~sxd@jut7kx|2m57q&krB_8sz(mCkGD+e{L1-K_Si$u zg&EVd8iSfAWv&Y*$2-S(IEttqfncS|9*$-qZ&X&PROY+1P`yj^A2yAjH4-;U8nxk( z{Ysw-+o20+AJMXTJiMAJe1y|rX1+PyhBjMe6|f5Y-wN>l;2|*%4Q@25tpl050svd6 zR)#YFSzsT};LzYkBU)fWy8^YVFjowr-BIru-q7Giqjo1@E+4|YS(qD&P;W>7o}!Z& zYP7jkz$#ExU{^o(`22rz_5HuVC>d;K75JkH`~+3D7}Nj& literal 0 HcmV?d00001 diff --git a/ACMAS/app/ACMAS_Web/components/.DS_Store b/ACMAS/app/ACMAS_Web/components/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..7b82bac5ba137da1261361accb74de01b79bb07b GIT binary patch literal 6148 zcmeHK&5qMB5FU5aZpsQN2axuHWQpqvNo`-f*<<@B0V-i|CDNqH0mqGY_uZS4FkRigcv|vLuDe^QT#nsAi_>A}MujWGeizKb{AN>-F^H z_(*Z5ty&%-djxu1^uYa(k<8#Au3^)e<9RqwmNGM}yu{EfV4kY>s0Q69- z1vX#%93w4;7F&a;fd~@{G@-&iF@y<6xwL+v#nzw+Ct)8S!uBle3q|PO(Z1B~BtnBO zbqqKL`V8!uY{2*bgI~Y@`#~<}7;p^yR}2X6G&-H(lkDBP^>KXHO6W@{3;VSObqErB h9czQH;zOtw)JZmgp~co9N+9l!fTqDEj)A|*zz>suuF(Jh literal 0 HcmV?d00001 diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/.DS_Store b/ACMAS/app/ACMAS_Web/components/dropdown_profile/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1ed7dc81ad5e1b3896bc2c3047aecd7d4dbc122e GIT binary patch literal 6148 zcmeHK!EVz)5S>j^;;2H31eJQJWQl84(o&GBUQAjJTx(PgfP#$!wQ#*w;$Tn|$>;WC zxbh|Z4t=w`DM|uWdqJq0k!Ig`cHVCMHuidnNcG0a4pE1QJUC;cjph%={p?HDaG6!0 zGGip9siK_vR4i3X;(t_t*KVB>8e-)N;P3V0%tuNoqXBKxDV20a*~?6Sh%+67#ebRS z@abM#e?ic=ui!2?L-R@7-SZS`_ zYk4hi&3hM~>MAUway;rq!#8~OO6x41#Zi2c4yu0V;i1mUD9r~$Lr9YWO5VOs^F&uY zJT-gk9@!`h;ylX8a- + + + + + + + test + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.js b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.js new file mode 100644 index 0000000..5f77c1d --- /dev/null +++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/index.js @@ -0,0 +1,43 @@ +function rotate() { + document.getElementById("diameter").classList.add("hover"); + document.getElementById("X").classList.add("opacity-100"); + document.getElementById("X").classList.add("visible"); + document.getElementById("X").classList.remove("opacity-0"); + document.getElementById("X").classList.remove("invisible"); + document.getElementById("Y").classList.add("opacity-100"); + document.getElementById("Y").classList.add("visible"); + document.getElementById("Y").classList.remove("opacity-0"); + document.getElementById("Y").classList.remove("invisible"); + document.getElementById("Z").classList.add("opacity-100"); + document.getElementById("Z").classList.add("visible"); + document.getElementById("Z").classList.remove("opacity-0"); + document.getElementById("Z").classList.remove("invisible"); + + document.getElementById("hover-zone").classList.add("visible"); + document.getElementById("hover-zone").classList.remove("invisible"); +} + +function reset() { + document.getElementById("diameter").classList.remove("hover"); + document.getElementById("X").classList.add("opacity-0"); + document.getElementById("X").classList.remove("opacity-100"); + + document.getElementById("Y").classList.add("opacity-0"); + document.getElementById("Y").classList.remove("opacity-100"); + + document.getElementById("Z").classList.add("opacity-0"); + document.getElementById("Z").classList.remove("opacity-100"); +} + +document.getElementById("X").addEventListener("transitionend", function() { + if(this.classList.contains("opacity-0")) { + document.getElementById("X").classList.add("invisible"); + document.getElementById("X").classList.remove("visible"); + document.getElementById("Y").classList.add("invisible"); + document.getElementById("Y").classList.remove("visible"); + document.getElementById("Z").classList.add("invisible"); + document.getElementById("Z").classList.remove("visible"); + document.getElementById("hover-zone").classList.add("invisible"); + document.getElementById("hover-zone").classList.remove("visible"); + } +}); \ No newline at end of file diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/style.css b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/style.css new file mode 100644 index 0000000..353fca9 --- /dev/null +++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/style.css @@ -0,0 +1,43 @@ +#x { + transform: rotate(-12deg); +} +#y { + transform: rotate(-45deg); +} +#z { + transform: rotate(-78deg); +} + +#X, #Y, #Z { + background: lightgrey; +} + +#X > svg { + transform: rotate(282deg); /* 102 + 180, there's a bug with tooltip, X also has class rotate-180 */ +} +#Y > svg { + transform: rotate(135deg); +} +#Z > svg { + transform: rotate(168deg); +} + + +#o { + background: black; +} +#hover-zone { + width: 12rem; + height: 12rem; + clip-path: circle(100% at 100% 100%); +} + +#diameter { + transition: all 0.5s ease-in-out; + width: 12rem; + height: 12rem; +} + +.hover { + transform: rotate(-90deg); +} \ No newline at end of file From d5ded18dbac4329fe0061420aa9030ed7481f4f5 Mon Sep 17 00:00:00 2001 From: RuikangRPI Date: Fri, 3 Nov 2023 12:32:40 -0400 Subject: [PATCH 02/11] feat: rotating profile dropdown - added script to _base.html - added profile dropdown - need to add on hover effects for the icons --- .../dropdown_profile/dropdown_profile.html | 156 ++++++++++++++++++ .../dropdown_profile/dropdown_profile.py | 14 ++ .../dropdown_profile/example/.DS_Store | Bin 0 -> 6148 bytes .../dropdown_profile/example/index.html | 89 +++++----- ACMAS/app/ACMAS_Web/templates/_base.html | 8 +- 5 files changed, 221 insertions(+), 46 deletions(-) create mode 100644 ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html index e69de29..a75a7c0 100644 --- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html +++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html @@ -0,0 +1,156 @@ +{% load component_tags %} + + + +
+ +
+ + \ No newline at end of file diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py index e69de29..2704803 100644 --- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py +++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.py @@ -0,0 +1,14 @@ +from django_components import component + + +@component.register("dropdown_profile") +class dropdown_profile(component.Component): + template_name = "dropdown_profile/dropdown_profile.html" + + + +# {% component "dropdown_profile" profile_icon="" %} +# + +# NOTE need to load following line at the top of component's html to do nested components +# {% load component_tags %} \ No newline at end of file diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store b/ACMAS/app/ACMAS_Web/components/dropdown_profile/example/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..870a976e630b6653438387dfb4541f7d63191a23 GIT binary patch literal 6148 zcmeH~yH3O~5Jm6676FFfyEd@0NE!u|!D9aWL5_I`Fz6T{4I>_rWbRM-N65K;D3M}xxA3env9n04I<=h5W#L*5=a6` zAPFRaA0WUpTdg^A%{mDrfh6!rK=+5jqFO^cSKB&RSqea%aM+A(y)J7^39X@>D`#lp zp;Ql*NHN62IbOoAhIXzV4vFML;>jP$i`dh-eld4Qb Pricing -
  • -
  • +
    +
    +
    • diff --git a/ACMAS/app/ACMAS_Web/templates/_base.html b/ACMAS/app/ACMAS_Web/templates/_base.html index ff2e031..4ed8324 100644 --- a/ACMAS/app/ACMAS_Web/templates/_base.html +++ b/ACMAS/app/ACMAS_Web/templates/_base.html @@ -287,14 +287,16 @@ {% block user %}
  • Logout
    • - +
  • {{ user.username }}
    • + +
  • {% component "dropdown_profile" %}
    • {% endblock %} {% else %} {% block anon %}
  • Register
    • - +
  • Login
    • {% endblock %} {% endif %} @@ -322,6 +324,8 @@ /svg> --> + + {% endblock body %} From b8b8128cf74387acded604a3eaefcc92a9311db1 Mon Sep 17 00:00:00 2001 From: RuikangRPI Date: Tue, 7 Nov 2023 16:59:51 -0500 Subject: [PATCH 03/11] polish nav and dropdown --- .../dropdown_profile/dropdown_profile.html | 20 ++++++++----- .../dropdown_profile/dropdown_profile.py | 7 +---- ACMAS/app/ACMAS_Web/templates/_base.html | 29 +++++++++---------- 3 files changed, 26 insertions(+), 30 deletions(-) diff --git a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html index a75a7c0..2d7f898 100644 --- a/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html +++ b/ACMAS/app/ACMAS_Web/components/dropdown_profile/dropdown_profile.html @@ -25,7 +25,7 @@ } #dropdown_profile_por { - background: url('data:image/svg+xml,'); + } #dropdown_profile_hover-zone { width: 12rem; @@ -49,19 +49,23 @@ } -
    +