responsive self service

lam/lib/html.inc

@@ -3235,7 +3235,108 @@ class htmlAccordion extends htmlElement {
 		return $result;
 	}
 
+}
+
+/**
+ * Responsive row with 12 column layout.
+ */
+class htmlResponsiveRow extends htmlElement {
+
+	private $cells = array();
+
+	/**
+	 * Adds a responsive cell to the row.
+	 *
+	 * @param htmlResponsiveCell $cell cell
+	 */
+	public function addCell($cell) {
+		$this->cells[] = $cell;
+	}
+
+	/**
+	 * Adds a cell with the given content and column counts.
+	 *
+	 * @param htmlElement $content content inside cell
+	 * @param int $numMobile number of columns for mobile view
+	 * @param int $numTablet number of columns for tablet view
+	 * @param int $numDesktop number of columns for desktop view
+	 * @param String $classes CSS classes separated by space
+	 */
+	public function add($content, $numMobile, $numTablet, $numDesktop, $classes = '') {
+		$this->addCell(new htmlResponsiveCell($content, $numMobile, $numTablet, $numDesktop, $classes));
+	}
+
+	/**
+	 * Prints the HTML code for this element.
+	 *
+	 * @param string $module Name of account module
+	 * @param array $input List of meta-HTML elements
+	 * @param array $values List of values which override the defaults in $input (name => value)
+	 * @param boolean $restricted If true then no buttons will be displayed
+	 * @param integer $tabindex Start value of tabulator index for input fields
+	 * @param string $scope Account type
+	 * @return array List of input field names and their type (name => type)
+	 */
+	public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+		echo '<div class="row">';
+		foreach ($this->cells as $cell) {
+			$cell->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+		}
+		echo '</div>';
+	}
 
 }
 
+/**
+ * Responsive cell inside htmlResponsiveRow with 12 column layout.
+ */
+class htmlResponsiveCell extends htmlElement {
+
+	private $content = null;
+	private $mobile = null;
+	private $tablet = null;
+	private $desktop = null;
+	private $classes = '';
+
+	/**
+	 * Constructs a cell inside a responsive row with 12 columns.
+	 *
+	 * @param htmlElement $content content inside cell
+	 * @param int $numMobile number of columns for mobile view
+	 * @param int $numTablet number of columns for tablet view
+	 * @param int $numDesktop number of columns for desktop view
+	 * @param String $classes CSS classes separated by space
+	 */
+	public function __construct($content, $numMobile, $numTablet, $numDesktop, $classes = '') {
+		$this->content = $content;
+		$this->mobile = $numMobile;
+		$this->tablet = $numTablet;
+		$this->desktop = $numDesktop;
+		$this->classes = $classes;
+	}
+
+	/**
+	 * Prints the HTML code for this element.
+	 *
+	 * @param string $module Name of account module
+	 * @param array $input List of meta-HTML elements
+	 * @param array $values List of values which override the defaults in $input (name => value)
+	 * @param boolean $restricted If true then no buttons will be displayed
+	 * @param integer $tabindex Start value of tabulator index for input fields
+	 * @param string $scope Account type
+	 * @return array List of input field names and their type (name => type)
+	 */
+	public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+		$clMobile = ($this->mobile > 0) ? 'small-' . $this->mobile : 'hide-for-small-only';
+		$clTablet = ($this->tablet > 0) ? 'medium-' . $this->tablet : 'hide-for-medium-only';
+		$clDesktop = ($this->desktop > 0) ? 'large-' . $this->desktop : 'hide-for-large-only';
+
+		echo '<div class="' . $clMobile . ' ' . $clTablet . ' ' . $clDesktop . ' columns ' . $this->classes . '">';
+		$this->content->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
+		echo '</div>';
+	}
+
+}
+
+
 ?>

lam/style/500_layout.css

@@ -291,6 +291,23 @@ td.loginLogo {
 	width: 65px;
 }
 
+div.roundedShadowBox {
+	border:2px solid #a0a0a4;
+	border-radius:5px;
+	box-shadow: 2px 2px 5px #a0a0a4;
+	margin: 10px;
+	display: inline-block;
+	background-color: white;
+	padding: 20px;
+	max-width: 575px;
+}
+
+div.centeredTable {
+	display: table;
+	width: 100%;
+	text-align: center;
+}
+
 a.lamLogo {
 	background-image: url(../graphics/logo24.png);
 	background-repeat: no-repeat;
@@ -633,3 +650,42 @@ h4.schema_oclass_sub {
 .oracleContextType-bright { background:#b6eeff !important; }
 .oracleContextType-dark { background-color:#80e0e1 !important; }
 
+/** responsive styles */
+/* mobile */
+@media only screen and (max-width: 40.0625em) {
+
+.mobile-align-left {
+	text-align: left;
+}
+
+.mobile-align-right {
+	text-align: right;
+}
+
+}
+
+/* tablet */
+@media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) {
+
+.tablet-align-left,.tabletPlus-align-left {
+	text-align: left;
+}
+
+.tablet-align-right,.tabletPlus-align-right {
+	text-align: right;
+}
+
+}
+
+/* desktop */
+@media only screen and (min-width: 64.0625em) {
+
+.desktop-align-left,.tabletPlus-align-left {
+	text-align: left;
+}
+
+.desktop-align-right,.tabletPlus-align-right {
+	text-align: right;
+}
+
+}