diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 94e447b..6a1c60e 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -14,8 +14,10 @@ --bg-post: #C5E1A5; --border-post: #9dd162; --bg-post-highlight: #9dd162; - --border-form: #FFB300; - --bg-form: #FCE4EC; + --border-form-box: #FFB300; + --bg-form-box: #FCE4EC; + --border-profile-form-box: #9dd162; + --bg-profile-form-box: lightblue; --bg-error-popup: red; --border-error-popup: red; --bg-id: DodgerBlue; @@ -128,9 +130,47 @@ nav a:hover, nav button:hover, z-index: 2; } +.form-box { + display: flex; + flex-direction: column; + width: fit-content; + height: fit-content; + padding: 5px; + background-color: var(--bg-form-box); + border: 2px solid var(--border-form-box); +} + +.form-box > h2 { + margin-top: 1vh; + margin-bottom: 2vh; + margin-left: 1vh; +} + +.form-box-list { + display: grid; + grid-template-columns: 1fr; + gap: 5vh; +} + +.profile-page, .account-page, .register-page, .login-page, .about-page, .user-page { + display: flex; + flex-direction: column; + padding-left: 15vh; + + .form-box { + background-color: var(--bg-profile-form-box); + border: 2px solid var(--border-profile-form-box); + } +} + +.register-page, .login-page { + padding-top: 15vh; +} + .new-thread-view { - margin-inline: 1vw; - margin-block: 3vw; + display: flex; + justify-content: center; + padding-top: 15vh; } /* css trick to have a dropdown menu on click */ @@ -359,13 +399,11 @@ nav a:hover, nav button:hover, } .reply-popup { - display: table; + display: grid; + grid-template-rows: 1fr 14fr; position: fixed; right: 1vw; top: 40vh; - background-color: var(--bg-form); - border: 2px solid var(--border-form); - padding: 5px; z-index: 3; } .reply-popup-dragzone { diff --git a/src/client/html.ml b/src/client/html.ml index cf547c1..b8676c6 100644 --- a/src/client/html.ml +++ b/src/client/html.ml @@ -49,18 +49,18 @@ module Home = struct let left t_s = let new_thread_view = (* TODO try to find better class names *) - let new_thread_form_div = - El.div - ~at:[ class' "new-thread-form-div" ] - [ Html_form.new_thread_el t_s ] - in El.div ~at:[ class' "new-thread-view" ] - [ h2 "New thread" - ; El.span - ~at:[ class' "new-thread-info" ] - [ el_txt "Click the map and make a new thread:" ] - ; new_thread_form_div + [ El.div + ~at:[ class' "form-box" ] + [ h2 "New thread" + ; El.span + ~at:[ class' "new-thread-info" ] + [ el_txt "Click the map and make a new thread:" ] + ; El.div + ~at:[ class' "new-thread-form-div" ] + [ Html_form.new_thread_el t_s ] + ] ] in let thread_view = Html_thread.f t_s in @@ -90,14 +90,14 @@ end module Register = struct let f t_s = - let l = [ h1 "Register"; Html_form.mk_register () ] in + let l = [ Html_form.mk_register () ] in let el = mk_page Register t_s l in el end module Login = struct let f t_s = - let l = [ h1 "Login"; Html_form.mk_login () ] in + let l = [ Html_form.mk_login () ] in let el = mk_page Login t_s l in el end @@ -167,8 +167,10 @@ module Profile = struct ; mk_page_link ~label:"public profile" (User (Loading user.user_id)) ] in - let forms = Html_form.profile user in - [ h1 "Profile settings"; public_profile_link ] @ forms + let forms = + El.div ~at:[ class' "form-box-list" ] (Html_form.profile user) + in + [ h1 "Profile settings"; public_profile_link; forms ] let f t_s = let el = mk_page Profile t_s [] in @@ -181,8 +183,10 @@ module Account = struct match get_user_private t with | None -> [] | Some user_private -> - let forms = Html_form.account user_private in - h1 "Account settings" :: forms + let forms = + El.div ~at:[ class' "form-box-list" ] (Html_form.account user_private) + in + [ h1 "Account settings"; forms ] let f t_s = let el = mk_page Account t_s [] in diff --git a/src/client/html_form.ml b/src/client/html_form.ml index a8b822e..223f1f4 100644 --- a/src/client/html_form.ml +++ b/src/client/html_form.ml @@ -79,18 +79,22 @@ let mk_logout () = in mk Logout ~btn [] +let mk_box title l = El.div ~at:[ class' "form-box" ] (h2 title :: l) + let mk_register () = let nick = mk_field `Text ~name:"nick" ~label:"Nickname" ~at:[] in let email = mk_field `Text ~name:"email" ~label:"Email" ~at:[] in let password = mk_field `Password ~name:"password" ~label:"Password" ~at:[] in let btn = mk_btn_submit () in - mk Register ~btn [ nick; email; password ] + let el = mk Register ~btn [ nick; email; password ] in + mk_box "Register" [ el ] let mk_login () = let nick = mk_field `Text ~name:"login" ~label:"Nickname or email" ~at:[] in let password = mk_field `Password ~name:"password" ~label:"Password" ~at:[] in let btn = mk_btn_submit () in - mk Login ~btn [ nick; password ] + let el = mk Login ~btn [ nick; password ] in + mk_box "Login" [ el ] let mk_subject_field_unwraped () = mk_field_unwraped `Text ~name:"subject" ~label:"Subject" ~at:[] @@ -226,7 +230,7 @@ let new_thread_el t_s = mk Home ~btn [ subject; comment; image; lat; lng ] let profile user = - let mk = mk Profile in + let mk ~btn l = mk Profile ~btn l in let nickname = let nick = mk_field `Text ~name:"nick" ~label:"Change nickname" @@ -234,7 +238,7 @@ let profile user = in let btn = mk_btn_save () in let form = mk ~btn [ nick ] in - [ h2 "Nickname"; form ] + mk_box "Nickname" [ form ] in let bio = let bio = @@ -243,7 +247,7 @@ let profile user = in let btn = mk_btn_save () in let form = mk ~btn [ bio ] in - [ h2 "Biography"; form ] + mk_box "Biography" [ form ] in let avatar = (* TODO @@ -281,12 +285,12 @@ let profile user = let btn = mk_btn_save () in [ mk ~btn [ file_el; alt_el ] ] in - (h2 "Avatar" :: delete) @ upload + mk_box "Avatar" (delete @ upload) in - nickname @ bio @ avatar + [ nickname; bio; avatar ] let account user_private = - let mk = mk Account in + let mk ~btn l = mk Account ~btn l in let email = let email = mk_field `Text ~name:"email" ~label:"Email" @@ -294,7 +298,7 @@ let account user_private = in let btn = mk_btn_save () in let form = mk ~btn [ email ] in - [ h2 "Change email"; form ] + mk_box "Change email" [ form ] in let password = let pw1 = @@ -306,7 +310,7 @@ let account user_private = in let btn = mk_btn_save () in let form = mk ~btn [ pw1; pw2 ] in - [ h2 "Change password"; form ] + mk_box "Change password" [ form ] in let big_delete = let btn = mk_btn ~at:[ class' "delete-account-btn" ] "DELETE ACCOUNT" in @@ -314,9 +318,9 @@ let account user_private = mk ~btn [ El.input ~at:[ type' "hidden"; name "delete-account"; value "" ] () ] in - [ h2 "Delete account"; form ] + mk_box "Delete account" [ form ] in - email @ password @ big_delete + [ email; password; big_delete ] let delete post = let btn = mk_btn "DELETE" in diff --git a/src/client/html_thread.ml b/src/client/html_thread.ml index 9be0ce0..8f98147 100644 --- a/src/client/html_thread.ml +++ b/src/client/html_thread.ml @@ -51,7 +51,9 @@ let reply_popup_el t_s w = let el = El.div ~at:[ class' "reply-popup-content" ] [ form ] in el in - let el = El.div ~at:[ class' "reply-popup" ] [ dragzone; content ] in + let el = + El.div ~at:[ class' "reply-popup"; class' "form-box" ] [ dragzone; content ] + in Html_form.Dragzone.f ~dragzone el; let is_open = S.map (fun t -> t.post_form.is_open) t_s in def_visibility `On is_open el;