Enhanced CSS for correct responsive testtool behaviour

Bootstrap, HTML- and CSS stylings were colliding and causing issues when resizing the screen. This is fixed now.
2026-06-01 12:19:28 +00:00 · 2019-06-06 08:48:25 +02:00
parent 99d0564656
commit eb3f814e09
4 changed files with 70 additions and 43 deletions
@@ -182,7 +182,7 @@ echo '
 	</script>
 </head>

-<body class='testtool-content'>
+<body>
 <?php
 if(!isset($_SESSION['pruefling_id']))
 	die($p->t('testtool/bitteZuerstAnmelden'));
@@ -512,7 +512,6 @@ if($frage->frage_id!='')
 			}
 		}
 	}
-	echo '<center>';
 	//Kopfzeile mit Weiter Button und Sprung direkt zu einer Frage
 	if(!$demo && !$levelgebiet)
 	{
@@ -520,7 +519,10 @@ if($frage->frage_id!='')
 				FROM testtool.tbl_pruefling_frage JOIN testtool.tbl_frage USING(frage_id) 
 				WHERE gebiet_id=".$db->db_add_param($gebiet_id, FHC_INTEGER)." AND pruefling_id=".$db->db_add_param($_SESSION['pruefling_id'], FHC_INTEGER)." AND demo=false ORDER BY nummer";

-		echo " <table><tr>";
+		echo "
+            <table class='table' style='margin-top: 20px; margin-bottom: 40px;'>
+                <tr class='text-center'>
+        ";
 		//Nummern der Fragen Anzeigen
 		$result = $db->db_query($qry);
 		while($row = $db->db_fetch_object($result))
@@ -528,9 +530,9 @@ if($frage->frage_id!='')
 			$antwort = new antwort();
 			$antwort->getAntwort($_SESSION['pruefling_id'],$row->frage_id);
 			if($row->frage_id==$frage_id)
-				echo " <a href='#' target='_self'><td style='width:12px; text-align:center; padding:2px; box-shadow: 0px 0px 3px 3px #888888;".(count($antwort->result)!=0?"background-color:lightblue;":"")."'>".($row->nummer<10?" ":"")."$row->nummer</td></a>";
+				echo "<a href='#' target='_self'><td style='width:20px; text-align:center; padding:5px; box-shadow: 0px 0px 3px 3px #888888;".(count($antwort->result)!=0?"background-color:lightblue;":"")."'>".($row->nummer<10?" ":"")."$row->nummer</td></a>";
 			else
-				echo " <a href='$PHP_SELF?gebiet_id=$gebiet_id&amp;frage_id=$row->frage_id'><td style='width:12px; text-align:center; padding:2px; box-shadow: 0px 0px 3px 0px #888888;".(count($antwort->result)!=0?"background-color:lightblue;":"")."'>$row->nummer</td></a>";
+				echo " <a href='$PHP_SELF?gebiet_id=$gebiet_id&amp;frage_id=$row->frage_id'><td style='width:20px; text-align:center; padding:5px; box-shadow: 0px 0px 3px 0px #888888;".(count($antwort->result)!=0?"background-color:lightblue;":"")."'>$row->nummer</td></a>";
 		}
 		//echo " </tr></table>";
 	}
@@ -552,7 +554,6 @@ if($frage->frage_id!='')
 		else
 		{
 			if(!$demo)
-			//else
 			{
 				//Wenns der letzte Eintrag ist, wieder zum ersten springen
 				echo " <a href='$PHP_SELF?gebiet_id=$gebiet_id' class='Item'>".$p->t('testtool/blaettern')." &gt;&gt;</a>";
@@ -561,30 +562,57 @@ if($frage->frage_id!='')
 	}
 	if(!$demo && !$levelgebiet)
 		echo " </tr></table>";
-	echo '<br/><br/><br/><br/>';
+
+	echo '
+        <br/>
+        <div class="row">
+            <div class="col-xs-12 col-lg-offset-1 col-lg-10">
+    ';
+
 	//Bild und Text der Frage anzeigen
 	if($frage->bild!='')
-		echo "<img class='testtoolfrage' src='bild.php?src=frage&amp;frage_id=$frage->frage_id&amp;sprache=".$_SESSION['sprache']."' /><br/><br/>\n";
-	
+    {
+       echo '
+            <div class="row text-center">
+                <img class="testtoolfrage" src="bild.php?src=frage&amp;frage_id='. $frage->frage_id.'&amp;sprache='. $_SESSION["sprache"].'"></img><br/><br/><br/> 
+            </div>      
+        ';
+    }
 	$timestamp = time();
+
 	//Sound einbinden
 	if($frage->audio!='')
 	{
-		echo '	<audio src="sound.php?src=frage&amp;frage_id='.$frage->frage_id.'&amp;sprache='.$_SESSION['sprache'].'&amp;'.$timestamp.'" controls="controls" type="audio/ogg">
+		echo '	
+            <div class="row text-center">
+                <audio src="sound.php?src=frage&amp;frage_id='.$frage->frage_id.'&amp;sprache='.$_SESSION['sprache'].'&amp;'.$timestamp.'" controls="controls" type="audio/ogg">
                     <div>
                           <p>Ihr Browser unterstützt dieses Audioelement leider nicht.</p>
                     </div>
-				</audio>';
+                </audio>       
+            </div>
+        ';
 	}
-	echo "$frage->text<br/><br/><br/><br/>\n";
+
+    $display_well = $frage->nummer == 0 ? '' : 'well'; // don't style frage 0 because this is always the introduction to gebiet
+    echo '
+        <div class="row">
+            <div class="col-xs-offset-1 col-xs-10 col-sm-offset-2 col-sm-8"> 
+                <div class="'. $display_well. ' text-center">'. $frage->text. '</div>
+            </div>      
+        </div>      
+    ';

    //Vorschlaege laden
 	$vs = new vorschlag();
 	$vs->getVorschlag($frage->frage_id, $_SESSION['sprache'], $gebiet->zufallvorschlag);
 	$letzte = $frage->getNextFrage($gebiet_id, $_SESSION['pruefling_id'], $frage_id, $demo);
 	echo "<form action=\"$PHP_SELF?gebiet_id=$gebiet_id&amp;frage_id=$frage->frage_id\" method=\"POST\" ".(!$letzte && !$levelgebiet?"onsubmit=\"letzteFrage()\"":"").">";
-	echo '<table class = "table">';
-	echo '<tr style="height: 70px;">';
+	echo '
+	    <div class="row text-center">
+            <table class="table" style="width: 600px; margin-left: auto; margin-right: auto;">
+                <tr>
+    ';
 	$anzahl = 1;
 	$beantwortet = false;
 	$cnt = 0; // counter für foreach-Schleife
@@ -597,7 +625,7 @@ if($frage->frage_id!='')
 	//Vorschlaege anzeigen
 	foreach ($vs->result as $vorschlag)
 	{
-		echo "\n<td align='center' valign='top'>";
+		echo "<td valign='top' style='padding: 25px;'>";
 		
 		//Bei multipleresponse checkboxen anzeigen ansonsten radiobuttons
 		if($gebiet->multipleresponse)
@@ -637,7 +665,7 @@ if($frage->frage_id!='')

 		if($anzahl>$gebiet->antwortenprozeile && ($cnt < $len-1))
 		{
-			echo '</tr><tr style="height: 70px;">';
+			echo '</tr><tr>';
 			$anzahl=1;
 		}

@@ -648,7 +676,7 @@ if($frage->frage_id!='')
 	//moeglichkeit fuer keine Antwort
 	if(!$gebiet->multipleresponse && !$levelgebiet && count($vs->result)>0)
 	{
-		echo "<td align='center' valign='top'>";
+		echo "<td valign='top' style='padding: 25px;'>";
 		echo '<input type="radio" class="button_style" name="vorschlag_id[]" value="" '.($beantwortet==false?'checked="checked"':'').'/><br /><font color="#acacac">'.$p->t('testtool/keineAntwort').'</font></td>';
 	}
 	echo '</tr></table>';
@@ -685,17 +713,19 @@ if($frage->frage_id!='')
 			}
 		}
 	}
+    echo '    
+        </div>  <!--/.row-->
+    ';
 	echo "</form>";
-	echo '<br/><br/><br/>';
-	echo '</center>';
+	echo '<br/><br/><br/><br/><br/>';
 }
 else
 {
 	//Wenn kein Demo vorhanden ist
-	echo "<br/><br/><br/><center><b>".$p->t("testtool/startDrueckenUmZuBeginnen")."</b></center>";
+	echo "<br/><br/><center><b>".$p->t("testtool/startDrueckenUmZuBeginnen")."</b></center>";
 }
-
 ?>
-
+        </div><!--/.col-->
+    </div><!--/.row-->
 </body>
 </html>
@@ -8,9 +8,9 @@

 <frameset rows="13%,*" cols="*" frameborder="NO" border="0" framespacing="0">
 	<frame src="topbar.php" name="topbar" scrolling="NO" noresize>
-	<frameset rows="*" cols="210,*" framespacing="0" frameborder="NO" border="0">
+	<frameset rows="*" cols="230,*" framespacing="0" frameborder="NO" border="0">
 		<frame id="menu_testtool" src="menu.php" name="menu" scrolling="AUTO" noresize>
-    	<frame id="content_testtool" style="padding: 20px 50px 0px 50px; overflow: hidden;" src="login.php" name="content">
+    	<frame id="content_testtool" style="padding-top: 24px; overflow: hidden;" src="login.php" name="content">
  	</frameset>
 	<noframes>
 		<body>
@@ -379,7 +379,10 @@ if(isset($_POST['save']) && isset($_SESSION['prestudent_id']))
 ?>
 </head>

-<body scroll="no" class='testtool-content'>
+<body scroll="no">
+    <div class="row">
+        <div class="col-xs-10 col-sm-9 col-lg-6">
+
 <?php

 //REIHUNGSTEST STARTSEITE (nach Login)
@@ -554,7 +557,7 @@ if (isset($prestudent_id))
            {
 				echo '
                    <p>'. $p->t('testtool/spracheDerTestfragen').':</p><br>
-                    <div class="btn-group btn-group-justified" role="group" style="width: 50%">          
+                    <div class="btn-group btn-group-justified" role="group">          
                ';

 				while($row = $db->db_fetch_object($result))
@@ -637,6 +640,7 @@ else
    </center>';
 }
 ?>
-
+    </div><!--/.col-->
+</div><!--/.row-->
 </body>
 </html>
@@ -25,11 +25,6 @@ body.main /* Workaround fuer Farbverlauf im IE statt ShadowBox */
 	padding:0px;
 	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#ffffff');
 }
-body.testtool-content
-{
-	width: 65%;
-	margin-left: 3%;
-}
 html
 {
 	height: 100%;
@@ -465,13 +460,12 @@ td.HeaderTesttool /*fuer die Button-Optik beim Testtool*/
 td.HeaderTesttoolSTG /*fuer die Button-Optik der Quereinstiegs-Studiengänge beim Testtool*/
 {
 	color: white;
-	border: 2px solid #add4ea;
+	border: 2px solid #73a9d6;
 	padding: 10px;
 	max-width: 100px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: normal;
-	font-weight: bold;
 }
 td.Inaktiv  /*fuer Inaktive Items bei der Raumbeschreibung */
 {
@@ -520,7 +514,6 @@ div.TesttoolTitle /* Ueberschrift auf den Titelfolien */
 	font-family: Helvetica, Arial, sans-serif;
 	text-transform: uppercase;
 	color: #FFFFFF;
-	display: table;
 	white-space: nowrap;
 	text-shadow: -1px 0 #00639C, 0 1px #00639C, 1px 0 #00639C, 0 -1px #00639C;
 	margin: 0 0 20px 0;