Still converting to bootstrap 5. Migrated init wizard

approot/admin-initwizard.xml

@@ -4,49 +4,44 @@
 
 <message id="Lms.Admin.InitWizard.template">
 	<div class="container">
-		<div class="row">
-			<div class="col-lg-8">
-				<div class="page-header">
+		<form class="row mt-3 justify-content-md-center g-3">
+			<div class="col-lg-6">
+				<div class="row g-3">
 					<h2>${tr:Lms.Admin.InitWizard.header}</h2>
-				</div>
-				<form>
-					<div class="form-horizontal">
-						<div class="form-group">
-							<label class="col-lg-3 control-label"  for="${id:admin-login}">
-								${tr:Lms.login}
-							</label>
-							<div class="col-lg-9">
-								${admin-login}
-								${admin-login-info class="help-block"}
-							</div>
-						</div>
-						<div class="form-group">
-							<label class="col-lg-3 control-label"  for="${id:password}">
-								${tr:Lms.password}
-							</label>
-							<div class="col-lg-9">
-								${password}
-								${password-info class="help-block"}
-							</div>
-						</div>
-						<div class="form-group">
-							<label class="col-lg-3 control-label"  for="${id:password-confirm}">
-								${tr:Lms.password-confirm}
-							</label>
-							<div class="col-lg-9">
-								${password-confirm}
-								${password-confirm-info class="help-block"}
-							</div>
-						</div>
-						<div class="form-group">
-							<div class="col-lg-offset-3 col-lg-9">
-								${create-btn class="btn-primary"}
-							</div>
+					<div class="col-12">
+						<label class="form-label" for="${id:admin-login}">
+							${tr:Lms.login}
+						</label>
+						${admin-login class="form-control"}
+						<div class="invalid-feedback">
+							${admin-login-info}
 						</div>
 					</div>
-				</form>
+					<div class="col-lg-6">
+						<label class="form-label" for="${id:password}">
+							${tr:Lms.password}
+						</label>
+						${password class="form-control"}
+						<div class="invalid-feedback">
+							${password-info}
+						</div>
+					</div>
+					<div class="col-lg-6">
+						<label class="form-label" for="${id:password-confirm}">
+							${tr:Lms.password-confirm}
+						</label>
+						${password-confirm class="form-control"}
+						<div class="invalid-feedback">
+							${password-confirm-info class="help-block"}
+						</div>
+					</div>
+					<div class="col-12">
+						${create-btn class="btn btn-primary"}
+					</div>
+					${info class="alert alert-success mt-3"}
+				</div>
 			</div>
-		</div>
+		</form>
 	</div>
 </message>
 

approot/login.xml

@@ -4,37 +4,39 @@
 
 <message id="Lms.Auth.template">
 	<div class="container">
-		<form class="row mt-5 justify-content-md-center">
-			<div class="row col col-lg-6 g-3">
-				<h2>${tr:Lms.Auth.welcome}</h2>
-				<div class="col-12">
-					<label class="form-label" for="${id:login-name}">
-						${tr:Lms.login}
-					</label>
-					${login-name class="form-control"}
-					<div class="invalid-feedback">
-						${login-name-info}
-					</div>
-				</div>
-				<div class="col-12">
-					<label class="form-label" for="${id:password}">
-						${tr:Lms.password}
-					</label>
-					${password class="form-control"}
-					<div class="invalid-feedback">
-						${password-info}
-					</div>
-				</div>
-				<div class="col-12">
-					<div class="form-check">
-						${remember-me class="form-check-input"}
-						<label class="form-check-label" for="${id:remember-me}">
-							${tr:Lms.Auth.remember-me}
+		<form class="row mt-3 justify-content-md-center">
+			<div class="col-lg-6">
+				<div class="row g-3">
+					<h2>${tr:Lms.Auth.welcome}</h2>
+					<div class="col-12">
+						<label class="form-label" for="${id:login-name}">
+							${tr:Lms.login}
 						</label>
+						${login-name class="form-control"}
+						<div class="invalid-feedback">
+							${login-name-info}
+						</div>
+					</div>
+					<div class="col-12">
+						<label class="form-label" for="${id:password}">
+							${tr:Lms.password}
+						</label>
+						${password class="form-control"}
+						<div class="invalid-feedback">
+							${password-info}
+						</div>
+					</div>
+					<div class="col-12">
+						<div class="form-check">
+							${remember-me class="form-check-input"}
+							<label class="form-check-label" for="${id:remember-me}">
+								${tr:Lms.Auth.remember-me}
+							</label>
+						</div>
+					</div>
+					<div class="col-12">
+						${login-btn class="btn btn-primary"}
 					</div>
-				</div>
-				<div class="col-12">
-					${login-btn class="btn btn-primary"}
 				</div>
 			</div>
 		</form>

approot/mediaplayer.xml

@@ -25,14 +25,14 @@
 					<i class="fa fa-fw fa-step-forward"/>
 				</button>
 			</div>
-			<div class="d-none d-md-block">
-				<i id="lms-mp-volume" class="fa fa-fw fa-volume-up"></i>
-				<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8"/>
-			</div>
 			<div class="flex-fill text-center text-truncate">
 				${title class="d-block text-truncate"}
 				${release class="text-decoration-none text-truncate link-success"}
 			</div>
+			<div class="d-none d-md-flex align-items-center Lms-player-volume-container">
+				<i id="lms-mp-volume" class="fa fa-fw fa-volume-up link-primary me-1"></i>
+				<input id ="lms-mp-volume-slider" class="form-range" type="range" min="0" max="1" step="0.01" value="0.8"/>
+			</div>
 			<div class="d-none d-sm-block text-muted text-nowrap">
 				<span id="lms-transcoding-active" title="${tr:Lms.Player.transcoding-active}" style="visibility:hidden"><i class="fa fa-fw fa-info-circle" aria-hidden="true"></i></span>
 				<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>

docroot/css/lms.css

@@ -31,12 +31,6 @@ body {
 	cursor: pointer;
 }
 
-.Lms-notification-container {
-	position: fixed;
-	bottom: 78px;
-	right: 0px;
-}
-
 .Lms-entry-playing {
 	background-color: var(--bs-dark);
 }
@@ -76,6 +70,28 @@ body {
 	min-width: 64px;
 }
 
+#lms-mp-progress {
+	transition: none;
+}
+
+#lms-mp-volume {
+  cursor: pointer;
+}
+
+#lms-mp-volume-slider::-webkit-slider-runnable-track {
+  background-color: var(--bs-gray-900);
+}
+
+#lms-mp-volume-slider::-moz-range-track {
+  background-color: var(--bs-gray-900);
+}
+
+.Lms-notification-container {
+	position: fixed;
+	bottom: 78px;
+	right: 0px;
+}
+
 .Lms-player {
 	height: 70px;
 }
@@ -84,6 +100,10 @@ body {
 	z-index: 999;
 }
 
+.Lms-player-volume-container {
+	width: 100px;
+}
+
 .Lms-player-seek-common {
 	position: absolute;
 	width:100%;
@@ -115,7 +135,6 @@ body {
 	width: 0;
 }
 
-
 .Lms-responsive-square {
 	width: 100%;
 }

src/lms/ui/admin/InitWizardView.cpp

@@ -126,6 +126,11 @@ InitWizardView::InitWizardView()
 		setFormWidget(InitWizardModel::PasswordConfirmField, std::move(passwordConfirmEdit));
 	}
 
+	// Result notification
+	Wt::WText* resultNotification {bindNew<Wt::WText>("info")};
+	resultNotification->setHidden(true);
+
+
 	Wt::WPushButton* saveButton = bindNew<Wt::WPushButton>("create-btn", Wt::WString::tr("Lms.create"));
 	saveButton->clicked().connect([=]
 	{
@@ -134,8 +139,8 @@ InitWizardView::InitWizardView()
 		if (model->validate())
 		{
 			model->saveData();
-			// TODO notify here
-			// LmsApp->notifyMsg(LmsApplication::MsgType::Success, Wt::WString::tr("Lms.Admin.InitWizard.done"));
+			resultNotification->setText(Wt::WString::tr("Lms.Admin.InitWizard.done"));
+			resultNotification->setHidden(false);
 			saveButton->setEnabled(false);
 		}