diff --git a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
index 30b5ed3f23dbfd075b0823ccb8e6c2b4c589fe3c..fe7b8c71a30edd8b01c2f692959f1abdf16f98d2 100755
--- a/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
+++ b/Frontend Angular 4/src/app/layout/matefun/matefun.component.html
@@ -36,7 +36,7 @@
/>
<button
- style="margin-left: 5px; float: right"
+ style="float: right"
id="shortcutsPopover"
class="btn btn-sm btn-secondary"
placement="bottom"
@@ -52,7 +52,7 @@
<button
id="downloadFileButton"
(click)="downloadFile()"
- style="margin-left: 5px; float: right"
+ style="float: right"
class="btn btn-sm btn-secondary"
placement="bottom"
ngbPopover="{{
@@ -66,7 +66,7 @@
<button
id="uploadFileButton"
(click)="seleccionarDirectorio(true)"
- style="margin-left: 5px; float: right"
+ style="float: right"
class="btn btn-sm btn-secondary"
placement="bottom"
ngbPopover="{{
@@ -78,7 +78,7 @@
<i class="fa fa-upload"></i>
</button>
<button
- style="margin-left: 5px; float: right"
+ style="float: right"
id="popover"
class="btn btn-sm btn-secondary"
placement="bottom"
@@ -92,7 +92,7 @@
<i class="fa fa-gear"></i>
</button>
<div
- style="margin-left: 5px; float: right"
+ style="float: right"
ngbPopover="{{
'i18n.action.save' | translate | titleCase
}} {{
@@ -110,7 +110,7 @@
</button>
</div>
<button
- style="margin-left: 5px; float: right"
+ style="float: right"
(click)="mostrandoDefinicion = false; reiniciarInterprete()"
class="btn btn-sm btn-secondary"
ngbPopover="{{
@@ -124,7 +124,7 @@
<i class="fa fa-refresh"></i>
</button>
<button
- style="margin-left: 5px; float: right"
+ style="float: right"
(click)="mostrandoDefinicion = false; runCode()"
class="btn btn-sm btn-secondary"
ngbPopover="{{
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss
index e0b5c5d7dbc55bbb1deba0001e92ac1e708860a5..34fb36827c4f7bf90f0f74acbe11ebea13be2fd8 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.scss
@@ -1,79 +1,64 @@
// Buttons Control
.buttons-control {
- .btn-zoom-increase, .btn-zoom-decrease, .btn-zoom-center, .btn-trash, .btn-download, .btn-setting {
- float: right;
- margin-top: -34px;
- }
- .btn-zoom-increase {
- margin-right: 165px;
- }
- .btn-zoom-decrease {
- margin-right: 132px;
- }
- .btn-zoom-center {
- margin-right: 99px;
- }
- .btn-trash {
- margin-right: 66px;
- }
- .btn-download {
- margin-right: 33px;
- }
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -34px;
+ margin-bottom: 7px;
}
// Settings Popover
.settings-popover-content {
- width: 12em;
- label {
- display: block;
- &.disabled {
- color: #ccc;
- }
+ width: 12em;
+ label {
+ display: block;
+ &.disabled {
+ color: #ccc;
}
- input[type="checkbox"] {
- width: 15px;
- display: inline-block;
+ }
+ input[type="checkbox"] {
+ width: 15px;
+ display: inline-block;
+ }
+ .setting-section {
+ margin-bottom: 1em;
+ }
+ .animation-controls {
+ .speed-value {
+ margin-left: 0.5em;
+ font-weight: 900;
+ font-size: 1.2em;
+ vertical-align: middle;
}
- .setting-section {
- margin-bottom: 1em;
+ &.disabled {
+ color: #ccc;
+ i.fa,
+ span {
+ color: #ccc;
+ }
}
- .animation-controls {
- .speed-value {
- margin-left: 0.5em;
- font-weight: 900;
- font-size: 1.2em;
- vertical-align: middle;
- }
- &.disabled {
- color: #ccc;
- i.fa, span {
- color: #ccc;
- }
- }
- }
- .zoom-control {
- &>.disabled {
- color: #ccc;
- }
+ }
+ .zoom-control {
+ & > .disabled {
+ color: #ccc;
}
+ }
}
// Animation
.animation {
- .btn-play, .btn-pause {
- float:left;
- margin-top: -5px;
- margin-right: 5px;
- }
- .progressbar {
- float: left;
- width: 90%;
- }
+ .btn-play,
+ .btn-pause {
+ float: left;
+ margin-top: -5px;
+ margin-right: 5px;
+ }
+ .progressbar {
+ float: left;
+ width: 90%;
+ }
}
#graph2D-container {
- height: 100%;
- width: 100%;
+ height: 100%;
+ width: 100%;
}
-
-
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss
index fe06fa38773fd14c43c00fb1628da017e7846297..70466c937a7ccfd39b310d858d7d64e3a53e200f 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss
+++ b/Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.scss
@@ -1,47 +1,48 @@
.controls {
- margin-top: -40px;
- height: 35px;
- padding: 4px;
- align-self: flex-end;
-
- .button {
- float:right;
- margin-right: 165px;
- margin-top: -55px
- }
-
- .ddown {
- vertical-align: bottom;
-
- button {
- padding: 2.5px 8px 2.5px 3px;
- }
- }
-
- .axes-size {
- width: 165px;
-
- .axe {
- display: flex;
-
- &:not(:last-child) {
- margin-bottom: 6px;
- }
-
- .less-than {
- padding: 0 2.5px 0 5px;
- font-size: 17px;
- letter-spacing: 4px;
- }
- }
- }
+ display: flex;
+ justify-content: flex-end;
+ align-self: flex-end;
+ width: fit-content;
+ margin: -35px -1px 7px 0;
+
+ .button {
+ float: right;
+ margin-right: 165px;
+ margin-top: -55px;
+ }
+
+ .ddown {
+ vertical-align: bottom;
+
+ button {
+ padding: 2.5px 8px 2.5px 3px;
+ }
+ }
+
+ .axes-size {
+ width: 165px;
+
+ .axe {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: 6px;
+ }
+
+ .less-than {
+ padding: 0 2.5px 0 5px;
+ font-size: 17px;
+ letter-spacing: 4px;
+ }
+ }
+ }
}
-.dropdown-item:disabled{
- background-color: #f7f7f7;
- color: #9e9e9e;
+.dropdown-item:disabled {
+ background-color: #f7f7f7;
+ color: #9e9e9e;
}
-.d-block{
- display: block;
-}
\ No newline at end of file
+.d-block {
+ display: block;
+}
diff --git a/Frontend Angular 4/src/styles/bootstrap/_popover.scss b/Frontend Angular 4/src/styles/bootstrap/_popover.scss
index 1b6363405ce939ff4b07e672542a0b15a82c3d28..dcd83dddf715b7382dfb93cc5f2df21d1da085a9 100755
--- a/Frontend Angular 4/src/styles/bootstrap/_popover.scss
+++ b/Frontend Angular 4/src/styles/bootstrap/_popover.scss
@@ -18,7 +18,6 @@
@include border-radius($border-radius-lg);
@include box-shadow($popover-box-shadow);
-
// Popover directions
&.popover-top,
@@ -67,7 +66,7 @@
}
}
- &.popover-bottom,
+ &.bs-popover-bottom,
&.bs-tether-element-attached-top {
margin-top: $popover-arrow-width;
@@ -90,7 +89,7 @@
}
// This will remove the popover-title's border just below the arrow
- .popover-title::before {
+ .popover-header::before {
position: absolute;
top: 0;
left: 50%;
@@ -126,9 +125,8 @@
}
}
-
// Offset the popover to account for the popover arrow
-.popover-title {
+.popover-header {
padding: $popover-title-padding-y $popover-title-padding-x;
margin-bottom: 0; // Reset the default from Reboot
font-size: $font-size-base;
@@ -142,11 +140,10 @@
}
}
-.popover-content {
+.popover-body {
padding: $popover-content-padding-y $popover-content-padding-x;
}
-
// Arrows
//
// .popover-arrow is outer, .popover-arrow::after is inner
@@ -169,3 +166,7 @@
content: "";
border-width: $popover-arrow-width;
}
+
+.btn.btn-sm.btn-secondary {
+ margin-inline-start: 4px;
+}