[UI] Better delimited the play queue

src/ui/audio/Audio.cpp

@@ -74,9 +74,11 @@ _playQueue(nullptr)
 	Wt::WHBoxLayout* trackControls = new Wt::WHBoxLayout();
 
 	Wt::WPushButton* playBtn = new Wt::WPushButton("Play");
+	playBtn->setStyleClass("btn-sm");
 	trackControls->addWidget(playBtn);
 
 	Wt::WPushButton* addBtn = new Wt::WPushButton("Add");
+	addBtn->setStyleClass("btn-sm");
 	trackControls->addWidget(addBtn);
 	trackControls->addWidget(new Wt::WText("Total duration: "), 1);
 
@@ -94,7 +96,10 @@ _playQueue(nullptr)
 		Wt::Dbo::Transaction transaction(_db.getSession());
 		Database::User::pointer user = _db.getCurrentUser();
 
+		Wt::WContainerWidget* playQueueContainer = new Wt::WContainerWidget();
+		playQueueContainer->setStyleClass("playqueue");
 		Wt::WVBoxLayout* playQueueLayout = new Wt::WVBoxLayout();
+		playQueueContainer->setLayout(playQueueLayout);
 
 		_mediaPlayer = new AudioMediaPlayer();
 		playQueueLayout->addWidget(_mediaPlayer);
@@ -104,15 +109,21 @@ _playQueue(nullptr)
 		Wt::WHBoxLayout* playlistControls = new Wt::WHBoxLayout();
 
 		Wt::WPushButton *saveBtn = new Wt::WPushButton("Save");
+		saveBtn->setStyleClass("btn-sm");
+
 		playlistControls->addWidget(saveBtn);
 		Wt::WPushButton *loadBtn = new Wt::WPushButton("Load");
+		loadBtn->setStyleClass("btn-sm");
 		playlistControls->addWidget(loadBtn);
 
 		Wt::WPushButton *upBtn = new Wt::WPushButton("UP");
+		upBtn->setStyleClass("btn-sm");
 		playlistControls->addWidget(upBtn);
 		Wt::WPushButton *downBtn = new Wt::WPushButton("DO");
+		downBtn->setStyleClass("btn-sm");
 		playlistControls->addWidget(downBtn);
 		Wt::WPushButton *delBtn = new Wt::WPushButton("DEL");
+		delBtn->setStyleClass("btn-sm");
 		playlistControls->addWidget(delBtn);
 
 		delBtn->clicked().connect(_playQueue, &PlayQueue::delSelected);
@@ -145,7 +156,7 @@ _playQueue(nullptr)
 
 		playQueueLayout->addLayout(playlistControls);
 
-		mainLayout->addLayout(playQueueLayout, 0, 0, 2, 1);
+		mainLayout->addWidget(playQueueContainer, 0, 0, 2, 1);
 	}
 
 	mainLayout->setRowStretch(1, 1);

src/ui/docroot/css/lms.css

@@ -14,6 +14,11 @@ div.contents {
 	padding: 0px 12px 6px;
 }
 
+.playqueue {
+	background-color: #BBB;
+	border-radius: 10px;
+}
+
 .playqueue-playing {
 	background-color: rgba(202, 167, 66, 1);
 }