Modifications for Bootstrap 5

replace tables in markup with responsive approach
This commit is contained in:
Leigh
2021-07-11 14:16:33 +02:00
parent 0b7b34f336
commit 31f35ad902
12 changed files with 334 additions and 425 deletions

View File

@ -86,7 +86,7 @@
<hr class="app-rule" />
<div class="row">
<div class="col text-center">
<label for="Module" class="control-label">@Localizer["Module.Manage"] </label>
<label Class="col-sm-3" For="Module" >@Localizer["Module.Manage"] </label>
<select class="form-select" @bind="@ModuleType">
<option value="new">@Localizer["Module.AddNew"]</option>
<option value="existing">@Localizer["Module.AddExisting"]</option>
@ -152,7 +152,7 @@
</div>
<div class="row">
<div class="col text-center">
<label for="Title" class="control-label">@Localizer["Title"] </label>
<label Class="col-sm-3" For="Title">@Localizer["Title"] </label>
<input type="text" name="Title" class="form-control" @bind="@Title" />
</div>
</div>
@ -160,7 +160,7 @@
{
<div class="row">
<div class="col text-center">
<label for="Pane" class="control-label">@Localizer["Pane"] </label>
<label Class="col-sm-3" For="Pane">@Localizer["Pane"] </label>
<select class="form-select" @bind="@Pane">
@foreach (string pane in PageState.Page.Panes)
{
@ -172,7 +172,7 @@
}
<div class="row">
<div class="col text-center">
<label for="Container" class="control-label">@Localizer["Container"] </label>
<label Class="col-sm-3" For="Container">@Localizer["Container"] </label>
<select class="form-select" @bind="@ContainerType">
@foreach (var container in _containers)
{

View File

@ -4,23 +4,19 @@
@inject ISettingService SettingService
@attribute [OqtaneIgnore]
<table class="table table-borderless">
<tr>
<td width="30%">
<Label For="title" ResourceKey="Title" HelpText="Specify If The Module Title Should Be Displayed">Display Title?</Label>
</td>
<td>
<div class="container">
<div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="title" ResourceKey="Title" HelpText="Specify If The Module Title Should Be Displayed">Display Title?</Label>
<div class="col-sm-9">
<select id="title" class="form-select" @bind="@_title">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="background\" ResourceKey="Background" HelpText="Optionally Specify A Background Color For The Container">Background Color:</Label>
</td>
<td>
</div>
</div>
<div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="background\" ResourceKey="Background" HelpText="Optionally Specify A Background Color For The Container">Background Color:</Label>
<div class="col-sm-9">
<select id="background" class="form-select" @bind="@_background">
<option value="">None</option>
<option value="bg-primary">Primary</option>
@ -32,13 +28,11 @@
<option value="bg-light">Light</option>
<option value="bg-dark">Dark</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="text" ResourceKey="Text" HelpText="Optionally Specify A Text Color For The Container">Text Color:</Label>
</td>
<td>
</div>
</div>
<div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="text" ResourceKey="Text" HelpText="Optionally Specify A Text Color For The Container">Text Color:</Label>
<div class="col-sm-9">
<select id="text" class="form-select" @bind="@_text">
<option value="">None</option>
<option value="text-primary">Primary</option>
@ -50,13 +44,11 @@
<option value="text-light">Light</option>
<option value="text-dark">Dark</option>
</select>
</td>
</tr>
<tr>
<td>
<Label For="border" ResourceKey="Border" HelpText="Optionally Specify A Border For The Container">Border Color:</Label>
</td>
<td>
</div>
</div>
<div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="border" ResourceKey="Border" HelpText="Optionally Specify A Border For The Container">Border Color:</Label>
<div class="col-sm-9">
<select id="border" class="form-select" @bind="@_border">
<option value="">None</option>
<option value="border">Default</option>
@ -69,45 +61,45 @@
<option value="border border-light">Light</option>
<option value="border border-dark">Dark</option>
</select>
</td>
</tr>
</table>
</div>
</div>
</div>
@code {
private string _title = "true";
private string _background = "";
private string _text = "";
private string _border = "";
@code {
private string _title = "true";
private string _background = "";
private string _text = "";
private string _border = "";
protected override void OnInitialized()
{
try
protected override void OnInitialized()
{
_title = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true");
_background = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
_text = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
_border = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
try
{
_title = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Title", "true");
_background = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Background", "");
_text = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Text", "");
_border = SettingService.GetSetting(ModuleState.Settings, GetType().Namespace + ":Border", "");
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
catch (Exception ex)
public async Task UpdateSettings()
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
try
{
var settings = ModuleState.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Title", _title);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Background", _background);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Text", _text);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Border", _border);
await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}
public async Task UpdateSettings()
{
try
{
var settings = ModuleState.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Title", _title);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Background", _background);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Text", _text);
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Border", _border);
await SettingService.UpdateModuleSettingsAsync(settings, ModuleState.ModuleId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}

View File

@ -4,46 +4,45 @@
@inject ISettingService SettingService
@attribute [OqtaneIgnore]
<table class="table table-borderless">
<tr>
<td width="30%">
<Label For="footer" ResourceKey="Footer" HelpText="Specify If A Footer Should Always Be Displayed In A Fixed Location At The Bottom Of The Browser Window">Display Fixed Footer?</Label>
</td>
<td>
<select id="footer" class="form-select" @bind="@_footer">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>
</table>
<div class="container">
<div class="row mb-1 align-items-center">
<Label Class="col-sm-3" For="footer" ResourceKey="Footer" HelpText="Specify If A Footer Should Always Be Displayed In A Fixed Location At The Bottom Of The Browser Window">Display Fixed Footer?</Label>
<div class="col-sm-9">
<select id="footer" class="form-select" @bind="@_footer">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</div>
</div>
@code {
private string _footer = "false";
protected override void OnInitialized()
{
try
@code {
private string _footer = "false";
protected override void OnInitialized()
{
_footer = SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false");
try
{
_footer = SettingService.GetSetting(PageState.Page.Settings, GetType().Namespace + ":Footer", "false");
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
catch (Exception ex)
public async Task UpdateSettings()
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
try
{
var settings = PageState.Page.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
await SettingService.UpdatePageSettingsAsync(settings, PageState.Page.PageId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}
public async Task UpdateSettings()
{
try
{
var settings = PageState.Page.Settings;
settings = SettingService.SetSetting(settings, GetType().Namespace + ":Footer", _footer);
await SettingService.UpdatePageSettingsAsync(settings, PageState.Page.PageId);
}
catch (Exception ex)
{
ModuleInstance.AddModuleMessage(ex.Message, MessageType.Error);
}
}
}