Initial Bootstrap 5 theme added.

2025-01-17 12:48:24 +01:00 · 2021-03-22 11:43:13 -07:00 · 2021-03-22 11:43:13 -07:00 · 79ded794b1
commit 79ded794b1
parent c33b91ee5c
15 changed files with 805 additions and 0 deletions
--- a/e107_themes/bootstrap5/README.md
+++ b/e107_themes/bootstrap5/README.md
@ -0,0 +1,2 @@
+# bootstrap5
+bootstrap5 theme for e107 v2.3.1+
--- a/e107_themes/bootstrap5/languages/English.php
+++ b/e107_themes/bootstrap5/languages/English.php
@ -0,0 +1,9 @@
+<?php
+
+/* example */
+
+// define('LAN_THEME_BOOTSTRAP5_001', "Example");
+
+
+
+
--- a/e107_themes/bootstrap5/languages/English_admin.php
+++ b/e107_themes/bootstrap5/languages/English_admin.php
@ -0,0 +1,11 @@
+<?php
+/*
+ ----------------------------------------------------------------------------+
+|     e107 website system - 
+|
+----------------------------------------------------------------------------+
+*/
+
+define("LAN_THEMEPREF_01", "Bootswatch Styles:");
+define("LAN_THEMEPREF_02", "Display standard menu with card look");
+define("LAN_THEMEPREF_03", "Display Login Page as standard page");
--- a/e107_themes/bootstrap5/layouts/bare_layout.html
+++ b/e107_themes/bootstrap5/layouts/bare_layout.html
@ -0,0 +1,10 @@
+  <!-- Page Content -->
+  <div class="container">
+    <div class="row mt-4">
+      <div class="col-lg-12">
+        {SETSTYLE=bare} 
+        {ALERTS}
+        {---}
+      </div>
+    </div>
+  </div>
--- a/e107_themes/bootstrap5/layouts/full_layout.html
+++ b/e107_themes/bootstrap5/layouts/full_layout.html
@ -0,0 +1,11 @@
+<!-- Layout: Full -->
+{ALERTS}
+<div class='container'>   
+    <!-- Page Heading/Breadcrumbs -->
+    <h1 class="mt-4 mb-3">{---CAPTION---}
+      <small>{---TEXT---}</small>
+    </h1>  
+    {---BREADCRUMB---}
+		{SETSTYLE=main}  
+  	{---} 
+</div>
--- a/e107_themes/bootstrap5/layouts/home_layout.html
+++ b/e107_themes/bootstrap5/layouts/home_layout.html
@ -0,0 +1,12 @@
+  <!-- place for Featurebox or any masthead solution -->
+  {SETSTYLE=bare}
+  {HERO}
+  {MENU=1}
+  <!-- Page Content -->
+
+   {ALERTS}
+   {SETSTYLE=section} <!-- Example -->
+   {---}
+   <div class="container">
+   {MENU=2}
+   </div>
--- a/e107_themes/bootstrap5/layouts/sidebar_left_layout.html
+++ b/e107_themes/bootstrap5/layouts/sidebar_left_layout.html
@ -0,0 +1,34 @@
+
+<!-- Magic Shortcodes - proof of concept -->
+<!-- Enabled Debug in 'basic' mode to view all available types -->
+
+  <!-- Page Content -->
+  <div class="container">
+
+    <!-- Page Heading/Breadcrumbs -->
+    <h1 class="mt-4 mb-3">{---CAPTION---}
+      <small>{---TEXT---}</small>
+    </h1>
+
+    {---BREADCRUMB---}
+
+    <div class="row">
+
+		  <div class="col-md-3 mb-3 sidebar">
+			<div class="menu"> 
+				{SETSTYLE=cardmenu}
+				{MENU=1} 
+			</div>
+		</div>
+
+    <div class="col-md-9">
+		{ALERTS}
+		{SETSTYLE=main}
+		{---}
+    </div>		
+
+    </div>
+    <!-- /.row -->
+
+  </div>
+  <!-- /.container -->
--- a/e107_themes/bootstrap5/layouts/sidebar_right_layout.html
+++ b/e107_themes/bootstrap5/layouts/sidebar_right_layout.html
@ -0,0 +1,42 @@
+
+<!-- Magic Shortcodes - proof of concept -->
+<!-- Enabled Debug in 'basic' mode to view all available types -->
+
+  <!-- Page Content -->
+  <div class="container">
+
+    <!-- Page Heading/Breadcrumbs -->
+    <h1 class="mt-4 mb-3">{---CAPTION---}
+      <small>{---TEXT---}</small>
+    </h1>
+
+    {---BREADCRUMB---}
+
+    <div class="row">
+
+      <!-- Blog Entries Column -->
+      <div class="col-md-8">
+			{ALERTS}
+			{SETSTYLE=main}
+			{---}
+      </div>
+
+		  <div class="col-md-4 mb-3 sidebar">
+			<!-- Standard sidebar menu -->
+			<div class="menu"> 
+				{SETSTYLE=cardmenu}
+				{MENU=1} 
+			</div>
+			<!-- Example for listgroup menu -->
+			<div class="list">
+				{SETSTYLE=listgroup}
+				{MENU=2} 
+			</div>
+		</div>
+
+    </div>
+    <!-- /.row -->
+
+  </div>
+  <!-- /.container -->
+ 
--- a/e107_themes/bootstrap5/layouts/splash_layout.html
+++ b/e107_themes/bootstrap5/layouts/splash_layout.html
@ -0,0 +1,6 @@
+{SETSTYLE=singlelogin}
+{ALERTS}
+{---}
+ 
+
+ 
--- a/e107_themes/bootstrap5/style.css
+++ b/e107_themes/bootstrap5/style.css
@ -0,0 +1,111 @@
+body {
+  padding-top: 56px;
+}
+
+body.layout-home {
+  padding-top: 0px;
+}
+
+body.layout-singlelogin {
+  padding-top: 0px;
+}
+
+
+
+/* featurebox defaults */
+#e107bootstrapcarousel .carousel-item {
+  height: 65vh;
+  min-height: 300px;
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+#e107fullpagecarousel .carousel-item {
+  height: 100vh;
+  min-height: 300px;
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-color: #272B30;
+  color: white;
+}
+
+
+ul.social-buttons li a {
+    font-size: 20px;
+    line-height: 50px;
+    display: block;
+    width: 50px;
+    height: 50px;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    color: #fff;
+    border-radius: 100%;
+    outline: 0;
+    background-color: #212529;
+}
+
+
+/* fix for comment avatar */
+
+.rounded-circle img.rounded {
+    border-radius: 50%!important;
+}
+
+@media (min-width: 768px) {
+    .offset1 {
+        margin-left: 8.33333%;
+    }
+}
+
+
+.list-group-item.active a {
+    z-index: 2;
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+/* fix for caret bootstrap user nav */
+.profile-photo-small {
+  display: inline;
+}
+
+/* fix for fixed-top on login page - to save custom header */
+.layout-singlelogin .fixed-top {
+  position: initial;
+}
+
+/* fix for too small core login box width */
+
+#login-template {
+    max-width: 95%;
+}
+
+@media (min-width: 768px) { 
+  #login-template {
+      max-width: 500px;
+      margin-right: auto;
+      margin-left: auto;
+  }
+}
+
+/* fix for too big margin */
+#login-template .login-page-footer {
+    margin-bottom: initial;  
+}
+
+/* */
+.jumbotron {
+  padding: 2rem 1rem;
+  margin-bottom: 2rem;
+  background-color: #e9ecef;
+  border-radius: .3rem;
+}
+
+/* CUSTOM Responsive Styles */
--- a/e107_themes/bootstrap5/theme.html
+++ b/e107_themes/bootstrap5/theme.html
@ -0,0 +1,62 @@
+
+<body id="page-top" class="{LAYOUT_ID}" {BODY_ONLOAD} >
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+    <div class="container">
+      <a class="navbar-brand" href="{SITEURL}">{SITENAME}</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarResponsive">
+      {NAVIGATION: type=main&class=me-auto}
+      {SIGNIN}
+      </div>
+    </div>
+  </nav>
+
+<!--- Optional custom header template controlled by theme_shortcodes -->
+{---HEADER---}
+
+<!-- Page Content -->
+{---LAYOUT---}
+
+<!-- Footer --> 
+{SETSTYLE=footer}
+
+
+<footer class="footer py-4 bg-dark text-white">
+	<div class="container">
+		<div class="content">
+				<div class="row">
+					<div class="col-md-3">
+					    <h4>Navigation</h4>
+					    {NAVIGATION: type=main&layout=alt}
+						{MENUAREA=10}
+					</div>
+					<div class="col-md-3">
+					    <h4>Follow Us</h4>
+					    {XURL_ICONS: template=footer}
+						{MENUAREA=11}
+					</div>
+					<div class="col-md-3">
+						{MENUAREA=12}
+					</div>
+					<div class="col-md-3">
+						{MENUAREA=13}
+					</div>
+				</div>
+		</div>
+		<hr>
+		<div class="container">{NAVIGATION: type=main&layout=footer}</div>
+		<div class="container">
+			<p class="m-0 text-center text-white">{SITEDISCLAIMER}</p>
+		</div>
+	<!-- /.container -->
+	</div>
+</footer>
+
+<!--- Optional custom footer template controlled by theme_shortcodes -->
+{---FOOTER---}
+
+{---MODAL---}
+<!-- Javascripts and other information are automatically added below here -->
+</body> <!-- This tag is not necessary and is ignored and replaced. Left here only as a reference -->
--- a/e107_themes/bootstrap5/theme.php
+++ b/e107_themes/bootstrap5/theme.php
@ -0,0 +1,235 @@
+<?php
+
+if(!defined('e107_INIT'))
+{
+	exit();
+}
+
+
+
+	class theme implements e_theme_render
+	{
+
+        public function init()
+        {
+
+            e107::lan('theme');
+
+            e107::meta('viewport', 'width=device-width, initial-scale=1.0'); // added to <head>
+        //    e107::link('rel="preload" href="{THEME}fonts/myfont.woff2?v=2.2.0" as="font" type="font/woff2" crossorigin');  // added to <head>
+
+            //e107::meta('apple-mobile-web-app-capable','yes');
+
+
+            $bootswatch = e107::pref('theme', 'bootswatch', false);
+            if($bootswatch) {
+                e107::css('url', 'https://bootswatch.com/4/' . $bootswatch . '/bootstrap.min.css');
+                e107::css('url', 'https://bootswatch.com/4/' . $bootswatch . '/bootstrap.min.css');
+            }
+
+            $inlinecss = e107::pref('theme', 'inlinecss', false);
+            if($inlinecss)
+            {
+                e107::css("inline", $inlinecss);
+            }
+            $inlinejs = e107::pref('theme', 'inlinejs');
+            if($inlinejs)
+            {
+                e107::js("footer-inline", $inlinejs);
+            }
+
+            e107::js("theme", 'custom.js', 'jquery');
+
+            $login_iframe  = e107::pref('theme', 'login_iframe', false);
+
+            //XXX FIXME - e_IFRAME cannot be redefined.
+            if (THEME_LAYOUT == "singlelogin" && $login_iframe)
+            {
+                define('e_IFRAME', '0');
+            }
+            if (THEME_LAYOUT == "singlesignup" && $login_iframe)
+            {
+                define('e_IFRAME', '0');
+            }
+
+
+
+        }
+
+
+		/**
+		 * @param string $text
+		 * @return string without p tags added always with bbcodes
+		 * note: this solves W3C validation issue and CSS style problems
+		 * use this carefully, mainly for custom menus, let decision on theme developers
+		 */
+
+		function remove_ptags($text = '') // FIXME this is a bug in e107 if this is required.
+		{
+
+			$text = str_replace(array("<!-- bbcode-html-start --><p>", "</p><!-- bbcode-html-end -->"), "", $text);
+
+			return $text;
+		}
+
+
+		function tablestyle($caption, $text, $mode='', $options = array())
+		{
+
+			$style = varset($options['setStyle'], 'default');
+
+			// Override style based on mode.
+			switch($mode)
+			{
+				case 'wmessage':
+				case 'wm':
+					$style = 'wmessage';
+					break;
+
+				case "login_page":
+				case "fpw":
+				case "coppa":
+				case "signup":
+					$style = 'splash';
+					break;
+
+			}
+
+			echo "\n<!-- tablestyle initial:  style=" . $style . "  mode=" . $mode . "  UniqueId=" . varset($options['uniqueId']) . " -->\n\n";
+
+			
+			if($style === 'listgroup' && empty($options['list']))
+			{
+				$style = 'cardmenu';
+			}
+
+			if($style === 'cardmenu' && !empty($options['list']))
+			{
+				$style = 'listgroup';
+			}
+
+			/* Changing card look via prefs */
+			if(!e107::pref('theme', 'cardmenu_look') && $style == 'cardmenu')
+			{
+				$style = 'menu';
+			}
+
+	//		echo "\n<!-- tablestyle:  style=" . $style . "  mode=" . $mode . "  UniqueId=" . varset($options['uniqueId']) . " -->\n\n";
+
+			if(deftrue('e_DEBUG'))
+			{
+				echo "\n<!-- \n";
+				echo json_encode($options, JSON_PRETTY_PRINT);
+				echo "\n-->\n\n";
+			}
+
+			switch($style)
+			{
+
+				case 'wmessage':
+				    echo '<div class="jumbotron"><div class="container text-center">';
+				        if(!empty($caption))
+				        {
+				          echo '<h1 class="display-4">'.$caption.'</h1>';
+				        }
+
+				    echo '<p class="lead">'.$this->remove_ptags($text).'</p>';
+				    echo '</div></div>';
+	            break;
+    
+				case 'bare':
+					echo $this->remove_ptags($text);
+					break;
+
+
+				case 'nocaption':
+				case 'main':
+					echo $text;
+					break;
+
+
+				case 'menu':
+					echo '<div class=" mb-4">';
+					if(!empty($caption))
+					{
+						echo '<h5 >' . $caption . '</h5>';
+					}
+					echo $text;
+					echo '</div>';
+					break;
+
+
+				case 'cardmenu':
+					echo '<div class="card mb-4">';
+					if(!empty($caption))
+					{
+						echo '<h5 class="card-header">' . $caption . '</h5>';
+					}
+					echo '<div class="card-body">';
+					echo $text;
+					echo '</div>
+						</div>';
+					break;
+
+
+				case 'listgroup': 
+					echo '<div class="card mb-4">';
+					if(!empty($caption))
+					{
+						echo '<h5 class="card-header">' . $caption . '</h5>';
+					}
+					echo $text;
+
+					if(!empty($options['footer'])) // XXX @see news-months menu.
+			        {
+			            echo '<div class="card-footer">
+		                      '.$options['footer'].'
+		                    </div>';
+			        }
+
+
+					echo '</div>';
+					break;
+          
+            case 'splash':
+	            echo '<div class="container  justify-content-center text-center my-5" id="'.$mode.'">
+	                 <div class="row  align-items-center">
+	                 <div class="card card-signin col-md-6 offset-md-3 " id="login-template"><div class="card-body">';
+
+                if(!empty($caption))
+                {
+  					echo '<h5 class="card-title text-center">' . $caption . '</h5>';
+  				}
+
+  				echo $text;
+
+  				if(!empty($options['footer'])) // XXX @see news-months menu.
+  			    {
+  			        echo '<div class="card-footer">
+  		                   '.$options['footer'].'
+  		                   </div>';
+  			    }
+
+  				echo '</div></div>
+						</div></div>';
+
+  					break;                
+
+
+			   default:
+
+					// default style
+					// only if this always work, play with different styles
+
+					if(!empty($caption))
+					{
+						echo '<h4>' . $caption . '</h4>';
+					}
+					echo $text;
+
+					return;
+			}
+
+		}
+
+	}
--- a/e107_themes/bootstrap5/theme.xml
+++ b/e107_themes/bootstrap5/theme.xml
@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<e107Theme name="Bootstrap 5" version="1.0" date="2021-03-22" compatibility="2.3.1">
+	<author name ="e107 Inc" email="e107inc@something.com" url="http://e107.org" />
+	<summary>Bootstrap 5 basic theme</summary>
+	<description>A starter template for bootstrap5 themes.</description>
+	<category>generic</category>
+	<plugins>
+		<plugin name='social' url='core' />
+		<plugin name='featurebox' url='core' />
+	</plugins>
+	<keywords>
+		<word>bootstrap</word>
+		<word>clean</word>
+        <word>wireframe</word>
+	</keywords>
+	<libraries>
+		<library name="bootstrap" version="5" scope="front"/>
+		<library name="fontawesome" version="5" scope="front"/>
+	</libraries>
+	<stylesheets>
+		<css file="style.css" name="Default" />
+	</stylesheets>
+	<screenshots>
+		<image>preview_frontend.png</image>
+	</screenshots>
+	<layouts>
+		<layout name='home' title='Home Page' >
+			<custompages>FRONTPAGE</custompages>
+		</layout>
+			<layout name='full' title='Full Page' >
+			<custompages>forum/ download/</custompages>
+		</layout>
+		<layout name='sidebar_left' title='Sidebar (left)' />
+		<layout name='sidebar_right' title='Sidebar (right)' default='true' />
+		<layout name='splash' title='Splash Page' >
+			<custompages>login fpw signup</custompages>
+		</layout>
+		<layout name='bare' title='Bare Page' >
+			<custompages></custompages>
+		</layout>
+	</layouts>
+	<themePrefs>
+		<pref name='cardmenu_look'>1</pref>
+		<pref name='inlinecss'></pref>
+		<pref name='login_iframe'></pref>
+	</themePrefs>
+</e107Theme>
--- a/e107_themes/bootstrap5/theme_config.php
+++ b/e107_themes/bootstrap5/theme_config.php
@ -0,0 +1,69 @@
+<?php
+
+if (!defined('e107_INIT')) { exit; }    
+
+$sitetheme = e107::getPref('sitetheme');
+
+e107::themeLan('admin', $sitetheme, true);
+
+
+
+
+class theme_config implements e_theme_config
+{
+
+	function __construct()
+	{
+ 
+	}
+
+
+	function config()
+	{
+		// v2.2.2  
+		$bootswatch = array(
+			"cerulean"=> 'Cerulean',
+			"cosmo"=> 'Cosmo',
+            "cyborg"=> 'Cyborg',
+            "darkly"=> 'Darkly',
+            "flatly"=> 'Flatly',
+            "journal"=> 'Journal',
+            "litera"=> 'Litera',
+            "lumen"=> 'Lumen',
+            "lux"=> 'Lux',
+            "materia"=> 'Materia', 
+            "minty"=> 'Minty', 
+            "pulse"=> 'Pulse', 
+            "sandstone"=> 'Sandstone',
+            "simplex"=> 'Simplex',
+            "sketchy"=> 'sketchy', 
+            "slate"=> 'Slate',
+            "solar"=> 'Solar',
+            "spacelab"=> 'Spacelab',
+            "superhero"=> 'Superhero',
+            "united"=> 'United',
+            "yeti"=> 'Yeti',
+		);
+		
+		$previewLink = " <a class='btn btn-default btn-secondary e-modal' data-modal-caption=\"Use the 'Themes' menu to view the selection.\" href='http://bootswatch.com/default/'>".LAN_PREVIEW."</a>";
+
+		return array(
+			'bootswatch'        => array('title'=>LAN_THEMEPREF_01, 'type'=>'dropdown', 'writeParms'=>array('optArray'=> $bootswatch, 'post'=>$previewLink, 'default'=>LAN_DEFAULT)),
+			'cardmenu_look' => array('title' => LAN_THEMEPREF_02, 'type'=>'boolean', 'writeParms'=>array(),'help'=>''),
+			'login_iframe' => array('title' => LAN_THEMEPREF_03, 'type'=>'boolean', 'writeParms'=>array(),'help'=>''),
+			);
+
+	}
+
+	function help()
+	{
+		return null; 
+	}
+	
+	function process()
+	{
+	 	return null;
+	}
+
+}
+
--- a/e107_themes/bootstrap5/theme_shortcodes.php
+++ b/e107_themes/bootstrap5/theme_shortcodes.php
@ -0,0 +1,144 @@
+<?php
+/*
+ * e107 website system
+ *
+ * Copyright (C) 2008-2021 e107 Inc (e107.org)
+ * Released under the terms and conditions of the
+ * GNU General Public License (http://www.gnu.org/licenses/gpl.txt)
+ *
+ * e107 Bootstrap Theme Shortcodes. 
+ *
+*/
+
+
+class theme_shortcodes extends e_shortcode
+{
+
+	/**
+	 * Special Header Shortcode for dynamic menuarea templates.
+	 * @shortcode {---HEADER---}
+	 * @return string
+	 */
+	function sc_header()
+	{
+		return "<!-- Dynamic Header template -->\n";
+	}
+
+
+	/**
+	 * Special Footer Shortcode for dynamic menuarea templates.
+	 * @shortcode {---FOOTER---}
+	 * @return string
+	 */
+	function sc_footer()
+	{
+		return "<!-- Dynamic Footer template -->\n";
+/*
+		return '
+			<footer class="footer py-4 bg-dark text-white">
+			<div class="container">       		
+				<div class="content">         			
+					<div class="row">           				
+						<div class="col-md-3">   <h4>Navigation</h4>{NAVIGATION: type=main&layout=alt} 
+							{MENUAREA=14}
+						</div>
+						<div class="col-md-3">   <h4>Follow Us</h4>{XURL_ICONS: template=footer}
+							{MENUAREA=15}
+						</div>           				
+						<div class="col-md-3">  
+							{MENUAREA=16}
+						</div>           				
+						<div class="col-md-3">  
+							{MENUAREA=17}
+						</div>                 			
+					</div>       		
+				</div>       		
+				<hr>   	 
+				<div class="container">    {NAVIGATION: type=main&layout=footer} </div>
+				<div class="container">      
+					<p class="m-0 text-center text-white">{SITEDISCLAIMER}</p>
+				</div>    
+				<!-- /.container -->
+				</div>
+		</footer>';*/
+
+
+	}
+
+	/**
+	 * Optional {---CAPTION---} processing.
+	 * @shortcode {---CAPTION---}
+	 * @return string
+	 */
+	function sc_caption($caption)
+	{
+		return $caption; 
+	}
+
+	/**
+	 * Will only function on the news page.
+	 * @example {THEME_NEWS_BANNER: type=date}
+	 * @example, {THEME_NEWS_BANNER: type=image}
+	 * @example {THEME_NEWS_BANNER: type=author}
+	 * @param null $parm
+	 * @return string|null
+	 */
+	function sc_theme_news_banner($parm=null)
+	{
+		/** @var news_shortcodes $news */
+		$sc = e107::getScBatch('news');
+		$news = $sc->getScVar('news_item');
+
+		$ret = '';
+		$type = varset($parm['type']);
+
+		switch($type)
+		{
+			case "title":
+				$ret = $sc->sc_news_title();
+				break;
+
+			case "date":
+				$ret = $sc->sc_news_date();
+				break;
+
+			case "comment":
+				$ret = $sc->sc_news_comment_count();
+				break;
+
+			case "author":
+				$ret = $sc->sc_news_author();
+				break;
+
+			case "image":
+			default:
+			if(!empty($news['news_thumbnail']))
+			{
+				$tmp = explode(',', $news['news_thumbnail']);
+
+				$opts = array(
+					'w' => 1800,
+					'h' => null,
+					'crop' => false,
+				);
+
+				$ret = e107::getParser()->toImage($tmp[0], $opts);
+			}
+			
+		}
+
+		return $ret;
+
+
+	}
+
+
+
+
+}
+
+
+
+
+
+