From 840fa1d659abe6b7868d9af834c68bc12361ef78 Mon Sep 17 00:00:00 2001
From: "v.tarantik" <v.tarantik@gmail.com>
Date: Tue, 20 Oct 2015 15:53:29 +0200
Subject: [PATCH] #40 New layout and screen arrangement for Encyclopedia

---
 .../encyclopedia/encyclopedia_cs.properties   |  8 +--
 .../encyclopedia/EncyclopediaScreen.java      | 66 ++++++-------------
 .../encyclopedia/content/model/Content.java   |  2 +-
 .../encyclopedia/content/model/Header.java    | 16 +++--
 4 files changed, 35 insertions(+), 57 deletions(-)

diff --git a/android/assets/text/screen/encyclopedia/encyclopedia_cs.properties b/android/assets/text/screen/encyclopedia/encyclopedia_cs.properties
index 473be7ec1..7dc209678 100644
--- a/android/assets/text/screen/encyclopedia/encyclopedia_cs.properties
+++ b/android/assets/text/screen/encyclopedia/encyclopedia_cs.properties
@@ -8,7 +8,7 @@ dysgraphia_paragraph_1=PĂ­smo jedince s\u00A0dysgrafiĂ­ je zpravidla velmi neÄŤi
 
 dysgraphia_paragraph_2=V dospívání a\u00A0v\u00A0dospělosti je psaní především prostředek pro zachycení informací a\u00A0zprostředkování informací druhým lidem. Pokud je písmo nečitelné a\u00A0tuto funkci neplní, je zbytečné ho využívat. V\u00A0takovém případě je výhodnější buď změnit typ písma - někdy stačí, když místo psacího písma začne dotyčný používat tiskací písmo, některým také pomohl přechod na nové písmo Comenia Script - viz http://www.lencova.eu/cs/uvod/comenia_script, nebo se naučit psát rychle a\u00A0efektivně všemi deseti prsty na počítači. Na internetu se pro tyto účely dají stáhnout volně dostupné programy pro osvojení psaní všemi deseti. Navíc člověk s\u00A0dysgrafií má nárok na uzpůsobení tohoto typu i\u00A0ve škole, takže by po vzájemné dohodě neměl být problém, aby psal tiskacím písmem nebo na počítači.
 
-dysgraphia_hint_text=Jestli po sobě nemůžeš přečíst a nepřečtou po tobě ani druzí, zkus psát tiskacími písmeny, nebo se nauč psát všemi deseti na počítači.
+dysgraphia_hint_text=Jestli po sobě nemůžeš přečíst a\u00A0nepřečtou po tobě ani druzí, zkus psát tiskacími písmeny, nebo se nauč psát všemi deseti na počítači.
 
 #    <!-- Dyslexia -->
 dyslexia=Dyslexie
@@ -25,7 +25,7 @@ dysorthographia=Dysortografie
 
 dysorthographia_definition=Obtíže v\u00A0písemném projevu. Text jedince s dysortografií je plný různých chyb a nepřesností, kterých se dopouští opakovaně a\u00A0nijak nesouvisejí s\u00A0jeho rozumovými schopnostmi.
 
-dysorthographia_paragraph_1=Tzv. specifická porucha učení, která se projevuje obtížemi v\u00A0písemném projevu, především v\u00A0jeho gramatické složce. Mezi typické chyby lidí s\u00A0dysortografií patří: vynechávání hlásek ve slovech, chybějící háčky a\u00A0čárky (tj. diakritika), záměny měkkých a\u00A0tvrdých slabik, záměny znělých a neznělých hlásek (např. c/s/z, b/p, g/k, m/n, h/ch), prohození hlásek ve slovech, takže jsou celá zkomolená, nesprávná aplikace gramatických pravidel. Někdy jde o\u00A0to, že jedinec s\u00A0dysortografií správnou hlásku "jakoby neslyší", nebo si neuvědomuje, ze kterých všech hlásek se slovo skládá, přestože slovo jako celek slyší a\u00A0chápe ho (to je právě jeden z projevů dysortografie). Jindy se jedná o situace, kdy nefunguje rychlá automatická aplikace gramatických pravidel, což působí dost paradoxně, protože dotyčný dokáže pravidlo přesně vysvětlit, když je na něj tázán, ale když musí rychle napsat větu, v\u00A0níž se kombinuje mnoho různých pravidel gramatiky, v\u00A0tom stejném pravidle, které právě bezchybně zdůvodnil, udělá chybu.
+dysorthographia_paragraph_1=Tzv. specifická porucha učení, která se projevuje obtížemi v\u00A0písemném projevu, především v\u00A0jeho gramatické složce. Mezi typické chyby lidí s\u00A0dysortografií patří: vynechávání hlásek ve slovech, chybějící háčky a\u00A0čárky (tj. diakritika), záměny měkkých a\u00A0tvrdých slabik, záměny znělých a\u00A0neznělých hlásek (např. c/s/z, b/p, g/k, m/n, h/ch), prohození hlásek ve slovech, takže jsou celá zkomolená, nesprávná aplikace gramatických pravidel. Někdy jde o\u00A0to, že jedinec s\u00A0dysortografií správnou hlásku "jakoby neslyší", nebo si neuvědomuje, ze kterých všech hlásek se slovo skládá, přestože slovo jako celek slyší a\u00A0chápe ho (to je právě jeden z\u00A0projevů dysortografie). Jindy se jedná o situace, kdy nefunguje rychlá automatická aplikace gramatických pravidel, což působí dost paradoxně, protože dotyčný dokáže pravidlo přesně vysvětlit, když je na něj tázán, ale když musí rychle napsat větu, v\u00A0níž se kombinuje mnoho různých pravidel gramatiky, v\u00A0tom stejném pravidle, které právě bezchybně zdůvodnil, udělá chybu.
 
 dysorthographia_paragraph_2=Stejně jako u\u00A0dyslexie je důležité uvědomit si, za jakých okolností je pro člověka nejvýhodnější psát, aby množství chyb v textu bylo co nejnižší (také stejně jako u dyslexie a\u00A0dysgrafie platí, že žáci a\u00A0studenti s\u00A0dysortografií ve všech typech škol mají nárok na uzpůsobení podmínek studia). Někdy pomůže dostatek času a klid na práci, někdy psaní na počítači s\u00A0možností automatických oprav. Je také nesmírně důležité texty po sobě umět velmi pečlivě kontrolovat a\u00A0vědět, čemu je třeba věnovat zvýšenou pozornost. V\u00A0případech, kdy je hodně důležitý obsah sdělení, se vyplatí, když po pisateli přečte text někdo druhý a chyby opraví, protože dotyčný je zpravidla "nevidí". Jinou fintou, která někdy zabírá, je číst text pozpátku tak, že čteme slova, jak jsou napsaná, ale od konce věty nebo odstavce, takže není možné se soustředit na obsah sdělení, ale jen na každé slovo zvlášť.
 
@@ -91,7 +91,7 @@ seriality_definition=Posloupnost neboli dovednost stanovit přesné kroky, jak v
 
 seriality_paragraph_1=Projeví se například při stanovení postupu práce nebo také způsobu řešení určitého úkolu. Jestliže máme někomu popsat, jak něco děláme, musíme využít serialitu. Stejně tak se serialita promítne do naší přesné práce, kdy nic nezapomeneme, vše dokončíme až do úplného finále, nevynecháme nic podstatného apod. Můžeme mluvit o\u00A0zrakové serialitě, kdy musíme znát pořadí či popsat sekvenci po sobě jdoucích informací, které vidíme. Nebo se někdy říká sluchová serialita, kdy zachycujeme postup toho, o\u00A0čem se mluví, co slyšíme. Mnohdy ovšem potřebujeme obě dvě. Mimo to složitější projevy seriality vyžadují, abychom dokázali popsat naše myšlenkové procesy, které ani nevidíme, ani neslyšíme.
 
-seriality_paragraph_2=Dyslexie je někdy doprovázena oslabením schopnosti seriality. Zajímavé je, že to bývá nezřídka kompenzováno velmi dokonalou schopností tzv. celostního myšlení, kdy naopak jedinec dokáže zpracovávat informace v širších souvislostech, umí nalézt řešení, aniž by věděl, jak k\u00A0němu dospěl. Když má informace prezentované ve větších celcích (jako příběh, film, obrázek se spoustou detailů apod.) pracuje se mu s nimi lépe, než jsou-li prezentovány v přesných seznamech a\u00A0v\u00A0přesné sekvenci děje. Někdy se říká, že velmi rozvinuté celostní myšlení je jednou z\u00A0"výhod" dyslexie. Rozhodně je taková schopnost velmi cenná a\u00A0je třeba ji pěstovat a\u00A0využívat, kdykoli je to vhodné. Někdy je ale užitečné (ve škole, v\u00A0práci i\u00A0doma) umět používat postupy a\u00A0umět předávat tyto postupy druhým (když víme, jak jsme na něco přišli, ale nedokážeme to vysvětlit druhým, je to někdy nepoužitelné). Dobrá zpráva spočívá opět v\u00A0tom, že svojí schopnost seriality můžeme zdokonalovat tréninkem.
+seriality_paragraph_2=Dyslexie je někdy doprovázena oslabením schopnosti seriality. Zajímavé je, že to bývá nezřídka kompenzováno velmi dokonalou schopností tzv. celostního myšlení, kdy naopak jedinec dokáže zpracovávat informace v\u00A0širších souvislostech, umí nalézt řešení, aniž by věděl, jak k\u00A0němu dospěl. Když má informace prezentované ve větších celcích (jako příběh, film, obrázek se spoustou detailů apod.) pracuje se mu s nimi lépe, než jsou-li prezentovány v přesných seznamech a\u00A0v\u00A0přesné sekvenci děje. Někdy se říká, že velmi rozvinuté celostní myšlení je jednou z\u00A0"výhod" dyslexie. Rozhodně je taková schopnost velmi cenná a\u00A0je třeba ji pěstovat a\u00A0využívat, kdykoli je to vhodné. Někdy je ale užitečné (ve škole, v\u00A0práci i\u00A0doma) umět používat postupy a\u00A0umět předávat tyto postupy druhým (když víme, jak jsme na něco přišli, ale nedokážeme to vysvětlit druhým, je to někdy nepoužitelné). Dobrá zpráva spočívá opět v\u00A0tom, že svojí schopnost seriality můžeme zdokonalovat tréninkem.
 
 seriality_hint_text=Vždy si na práci udělej dost času! Především když víš, že jinak hrozí, že budeš hodně chybovat.
 
@@ -154,7 +154,7 @@ visual_distinction=Zrakové rozlišování
 
 visual_distinction_definition=Schopnost rozlišovat podobně vyhlížející symboly a\u00A0znaky.
 
-visual_distinction_paragraph_1=Jedná se o\u00A0obdobu sluchového rozlišování a\u00A0u\u00A0 lidí s\u00A0dyslexií bývá tato schopnost někdy dlouhodobě oslabená. Jinak se obvykle rozvine v\u00A0předškolním věku a\u00A0děti ji dokážou dobře využívat po nástupu do školy, když se učí číst, psát a\u00A0počítat. Oslabené zrakové rozlišování může vést k\u00A0záměnám podobných značek či obrázků a\u00A0tedy také k\u00A0záměnám podobných písmen, jako jsou b/d/p, u/n, a/e/o, s/z aj. Vždy jde jen o\u00A0velmi nepatrný detail, který je znázorněn jinak či umístěn na jiné straně, ale vytváří podstatný rozdíl. Podobné trable se pak mohou objevit při určení směru jízdy, kdy jde o\u00A0stejnou šipku, která jen míří jiným směrem, nebo při určování podobných značek produktů v\u00A0obchodě apod. Stejně jako sluchové rozlišování i\u00A0zrakové rozlišování se může trénovat a zdokonalovat, což se děje hlavně na prvním stupni základní školy, když se ukáže, že má žák v dané oblasti nějaké trable.
+visual_distinction_paragraph_1=Jedná se o\u00A0obdobu sluchového rozlišování a\u00A0u\u00A0 lidí s\u00A0dyslexií bývá tato schopnost někdy dlouhodobě oslabená. Jinak se obvykle rozvine v\u00A0předškolním věku a\u00A0děti ji dokážou dobře využívat po nástupu do školy, když se učí číst, psát a\u00A0počítat. Oslabené zrakové rozlišování může vést k\u00A0záměnám podobných značek či obrázků a\u00A0tedy také k\u00A0záměnám podobných písmen, jako jsou b/d/p, u/n, a/e/o, s/z aj. Vždy jde jen o\u00A0velmi nepatrný detail, který je znázorněn jinak či umístěn na jiné straně, ale vytváří podstatný rozdíl. Podobné trable se pak mohou objevit při určení směru jízdy, kdy jde o\u00A0stejnou šipku, která jen míří jiným směrem, nebo při určování podobných značek produktů v\u00A0obchodě apod. Stejně jako sluchové rozlišování i\u00A0zrakové rozlišování se může trénovat a\u00A0zdokonalovat, což se děje hlavně na prvním stupni základní školy, když se ukáže, že má žák v dané oblasti nějaké trable.
 
 visual_distinction_hint_text=Využívej při učení co nejvíce smyslů! O\u00A0čem se mluví, to si najdi jako obrázek. Když to půjde, osahej si to, pohybuj s\u00A0tím, nebo si to sám/sama zapiš nebo zakresli.
 
diff --git a/core/src/cz/nic/tablexia/screen/encyclopedia/EncyclopediaScreen.java b/core/src/cz/nic/tablexia/screen/encyclopedia/EncyclopediaScreen.java
index 76d3b616a..720e17ecf 100644
--- a/core/src/cz/nic/tablexia/screen/encyclopedia/EncyclopediaScreen.java
+++ b/core/src/cz/nic/tablexia/screen/encyclopedia/EncyclopediaScreen.java
@@ -3,38 +3,27 @@ package cz.nic.tablexia.screen.encyclopedia;
 import com.badlogic.gdx.audio.Music;
 import com.badlogic.gdx.files.FileHandle;
 import com.badlogic.gdx.graphics.Color;
-import com.badlogic.gdx.scenes.scene2d.Actor;
 import com.badlogic.gdx.scenes.scene2d.Group;
 import com.badlogic.gdx.scenes.scene2d.InputEvent;
-import com.badlogic.gdx.scenes.scene2d.Touchable;
 import com.badlogic.gdx.scenes.scene2d.ui.Button;
-import com.badlogic.gdx.scenes.scene2d.ui.Cell;
-import com.badlogic.gdx.scenes.scene2d.ui.HorizontalGroup;
-import com.badlogic.gdx.scenes.scene2d.ui.Image;
 import com.badlogic.gdx.scenes.scene2d.ui.ScrollPane;
-import com.badlogic.gdx.scenes.scene2d.ui.Stack;
 import com.badlogic.gdx.scenes.scene2d.ui.Table;
 import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
 import com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable;
-import com.badlogic.gdx.utils.Align;
 
 import java.util.List;
 import java.util.Map;
 
 import cz.nic.tablexia.TablexiaSettings;
-import cz.nic.tablexia.screen.encyclopedia.content.model.Hint;
 import cz.nic.tablexia.util.Point;
 import cz.nic.tablexia.screen.AbstractTablexiaScreen;
 import cz.nic.tablexia.screen.encyclopedia.assets.EncyclopediaAssets;
 import cz.nic.tablexia.screen.encyclopedia.content.ContentParser;
 import cz.nic.tablexia.screen.encyclopedia.content.model.Content;
-import cz.nic.tablexia.screen.encyclopedia.content.model.Header;
 import cz.nic.tablexia.screen.encyclopedia.menu.MenuItem;
 import cz.nic.tablexia.screen.encyclopedia.menu.MenuWidget;
 import cz.nic.tablexia.screen.encyclopedia.widget.ResizableScrollPane;
-import cz.nic.tablexia.screen.encyclopedia.widget.ResizableVerticalGroup;
 import cz.nic.tablexia.screen.encyclopedia.widget.ResizableWidgetGroup;
-import cz.nic.tablexia.util.Log;
 import cz.nic.tablexia.util.ui.TablexiaButton;
 
 public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
@@ -43,7 +32,6 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
     private static final float RIGHT_PANEL_PADDING_TOP = 10;
     private static final float FONT_BUTTON_WIDTH = 70;
     public static final float CLOSE_BUTTON_WIDTH = 60;
-    public static final Point CLOSE_BUTTON_POSITION = new Point(10, 10);
     private static final float BUTTONS_MARGIN_LEFT = 30;
     private static final float BUTTONS_GAP = 20;
     private static final float CONTENT_RELATIVE_WIDTH = 0.75f;
@@ -53,9 +41,9 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
     private static final String FONT_MINUS_TEXT = "-A";
     private static final String MUSIC_EXTENSION = ".mp3";
 
-    private Stack contentStack;
+    private Table contentStack;
     private Table rightPanelStack;
-    private HorizontalGroup container;
+    private Table container;
     private Table content;
     private ScrollPane contentScrollPane;
     private Table rightPanel;
@@ -67,7 +55,7 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
 
     @Override
     protected void screenLoaded(Map<String, String> screenState) {
-        container = new HorizontalGroup();
+        container = new Table();
         container.setSize(SCREEN_SIZE.x, SCREEN_SIZE.y);
         getStage().addActor(container);
 
@@ -80,7 +68,7 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
 
     private void prepareContentLayout() {
         //TODO add culling
-        contentStack = new Stack();
+        contentStack = new Table();
         contentStack.setSize(CONTENT_RELATIVE_WIDTH * SCREEN_SIZE.x, SCREEN_SIZE.y);
         content = new Table();
         // content.setCullingArea(new Rectangle(0, 0, CONTENT_RELATIVE_WIDTH * SCREEN_SIZE.x, SCREEN_SIZE.y));
@@ -88,10 +76,22 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
         contentScrollPane.setScrollingDisabled(true, false);
         contentScrollPane.setSize(CONTENT_RELATIVE_WIDTH * SCREEN_SIZE.x, SCREEN_SIZE.y);
 
-        contentStack.addActor(new Image(getColorTextureRegion(BACKGROUND_COLOR)));
-        contentStack.addActor(contentScrollPane);
+//        contentStack.addActor(new Image(getColorTextureRegion(BACKGROUND_COLOR)));
+        contentStack.setBackground(new TextureRegionDrawable(getColorTextureRegion(BACKGROUND_COLOR)));
 
-        container.addActor(contentStack);
+        Button closeButton = new Button(new TextureRegionDrawable(getScreenTextureRegion(EncyclopediaAssets.CLOSEBUTTON_UNPRESSED)), new TextureRegionDrawable(getScreenTextureRegion(EncyclopediaAssets.CLOSEBUTTON_PRESSED)));
+        closeButton.addListener(new ClickListener() {
+            @Override
+            public void clicked(InputEvent event, float x, float y) {
+                super.clicked(event, x, y);
+                disposeMusic();
+            }
+        });
+        closeButton.setSize(CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH);
+        contentStack.add(closeButton).bottom().padLeft(10).padBottom(10);
+        contentStack.add(contentScrollPane);
+
+        container.add(contentStack);
     }
 
     private void prepareRightMenu() {
@@ -123,25 +123,10 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
         rightPanelStack.setBackground(new TextureRegionDrawable(getColorTextureRegion(BACKGROUND_COLOR)));
         rightPanelStack.add(rightPanel).padTop(RIGHT_PANEL_PADDING_TOP);
 
-        container.addActor(rightPanelStack);
+        container.add(rightPanelStack);
     }
 
     private void prepareButtons() {
-        Button closeButton = new Button(new TextureRegionDrawable(getScreenTextureRegion(EncyclopediaAssets.CLOSEBUTTON_UNPRESSED)), new TextureRegionDrawable(getScreenTextureRegion(EncyclopediaAssets.CLOSEBUTTON_PRESSED)));
-        closeButton.addListener(new ClickListener() {
-            @Override
-            public void clicked(InputEvent event, float x, float y) {
-                super.clicked(event, x, y);
-                disposeMusic();
-            }
-        });
-        closeButton.setSize(CLOSE_BUTTON_WIDTH, CLOSE_BUTTON_WIDTH);
-        closeButton.setPosition(CLOSE_BUTTON_POSITION.x, CLOSE_BUTTON_POSITION.y);
-        Group closeButtonGroup = new Group();
-        closeButtonGroup.addActor(closeButton);
-        closeButtonGroup.setTouchable(Touchable.childrenOnly);
-        contentStack.addActor(closeButtonGroup);
-
         TablexiaButton btnFontPlus = new TablexiaButton(FONT_PLUS_TEXT, TablexiaButton.ButtonType.BLUE);
         btnFontPlus.setSize(FONT_BUTTON_WIDTH, FONT_BUTTON_WIDTH);
         btnFontPlus.setPosition(BUTTONS_MARGIN_LEFT, 0);
@@ -162,19 +147,10 @@ public class EncyclopediaScreen extends AbstractTablexiaScreen<Void> {
         List<Content> contentList = ContentParser.parseEncyclopediaPageContent(fileHandle.readString());
 
         for (Content c : contentList) {
-//            Actor a = c.render(this, CONTENT_RELATIVE_WIDTH * SCREEN_SIZE.x);
-//            if (c instanceof Header) {
-//                content.add(a).align(Align.left).padLeft(CLOSE_BUTTON_POSITION.x + CLOSE_BUTTON_WIDTH).padBottom(25).padTop(20);
-//            } else {
-//                Cell cell =  content.add(a).fillX().expandX().padLeft(CLOSE_BUTTON_POSITION.x + CLOSE_BUTTON_WIDTH).padRight(10).padBottom(10);
-//                if (c instanceof Hint) {
-//                   cell.padTop(25);
-//                }
-//            }
             c.addToCell(content,this,CONTENT_RELATIVE_WIDTH * SCREEN_SIZE.x);
             content.row();
         }
-        getStage().setDebugUnderMouse(true);
+//        getStage().setDebugUnderMouse(true);
     }
 
     public void playMusic(String music, TablexiaButton musicButton) {
diff --git a/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Content.java b/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Content.java
index d3ea869b4..3008a2dc3 100644
--- a/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Content.java
+++ b/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Content.java
@@ -19,6 +19,6 @@ public abstract class Content {
     abstract Actor render(AbstractTablexiaScreen screen,float parentContainerWidth);
 
     public Cell addToCell(Table contentTable,AbstractTablexiaScreen screen, float parentContainerWidth){
-        return contentTable.add(render(screen,parentContainerWidth)).fillX().expandX().padLeft(EncyclopediaScreen.CLOSE_BUTTON_POSITION.x + EncyclopediaScreen.CLOSE_BUTTON_WIDTH).padRight(20).padBottom(10);
+        return contentTable.add(render(screen, parentContainerWidth)).expandX().fillX().padRight(20).padBottom(10).left();
     }
 }
diff --git a/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Header.java b/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Header.java
index 9b9b07544..69d4ba551 100644
--- a/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Header.java
+++ b/core/src/cz/nic/tablexia/screen/encyclopedia/content/model/Header.java
@@ -5,6 +5,7 @@ import com.badlogic.gdx.scenes.scene2d.Actor;
 import com.badlogic.gdx.scenes.scene2d.InputEvent;
 import com.badlogic.gdx.scenes.scene2d.ui.Cell;
 import com.badlogic.gdx.scenes.scene2d.ui.Table;
+import com.badlogic.gdx.scenes.scene2d.ui.Value;
 import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
 import com.badlogic.gdx.utils.Align;
 
@@ -34,29 +35,30 @@ public class Header extends Content {
         //TODO add ImageButton with play icon
         //TODO enlarge header label font
         Table table = new Table();
+        Actor label = textContent.render(screen, parentContainerWidth);
+        table.add(label).expandX().left();
         if (soundResource!=null) {
             final TablexiaButton button = new TablexiaButton(screen.getText(EncyclopediaAssets.PLAY), TablexiaButton.ButtonType.GREEN);
             button.addListener(new ClickListener() {
                 @Override
                 public void clicked(InputEvent event, float x, float y) {
                     super.clicked(event, x, y);
-                    EncyclopediaScreen encyclopediaScreen = ((EncyclopediaScreen)(screen));
-                    if(button.isChecked()){
-                        encyclopediaScreen.playMusic(soundResource,button);
-                    }else{
+                    EncyclopediaScreen encyclopediaScreen = ((EncyclopediaScreen) (screen));
+                    if (button.isChecked()) {
+                        encyclopediaScreen.playMusic(soundResource, button);
+                    } else {
                         encyclopediaScreen.disposeMusic();
                     }
                 }
             });
-            table.add(button);
+            table.add(button).expandX().right().padRight(20);
         }
-        table.add(textContent.render(screen, parentContainerWidth));
         return table;
     }
 
     @Override
     public Cell addToCell(Table contentTable, AbstractTablexiaScreen screen, float parentContainerWidth) {
-        return  contentTable.add(render(screen, parentContainerWidth)).align(Align.left).padLeft(EncyclopediaScreen.CLOSE_BUTTON_POSITION.x + EncyclopediaScreen.CLOSE_BUTTON_WIDTH).padBottom(25).padTop(20);
+        return  contentTable.add(render(screen, parentContainerWidth)).expandX().fillX().padBottom(25).padTop(20).left();
     }
 
     public void setSoundResource(String soundResource) {
-- 
GitLab